this指向学习笔记
this指向
this永远指向最后调用它的对象
例1：
var name = "windowsName";
function a() {
var name = "name";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window a调用的地方在a()，前面没有调用的对象，即为window.a()，所以window指向window
例2：
var name = "windowsName";
var a = {
name: "name",
fn : function () {
console.log(this.name); // name
}
}
a.fn();
window.a.fn(); fn()由对象a调用，所以fn()中的this指向对象a。
window.a.fn()中，最后调用this的对象仍然是a，所以依旧输出name
例3：
var name = "windowsName";
var a = {
name : null,
// name: "name",
fn : function () {
console.log(this.name); // windowsName
}
}
var f = a.fn;
f(); a对象没有调用fn，只是赋值给了f，真正调用fn的是f(),也就是仍然是window调用
例4：
var name = "windowsName";
function fn() {
var name = 'name';
innerFunction();
function innerFunction() {
console.log(this.name); // windowsName
}
}
fn() 补充知识：
innerFunction()是作为一个函数调用，不属于某一个对象，仅仅是一个函数，没有挂载在任何对象上，所以innerFunction()内的this在非严格模式默认是指向全局对象 window 的，在严格模式，就是 undefined。
改变this指向
方法：
- ES6 的箭头函数
- 在函数内部使用
_this = this - 使用
apply、call、bind - new 实例化一个对象
例1：
var name = "windowsName";
var a = {
name : "name",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
},100);
}
};
a.func2() // this.func1 is not a function 补充知识：
function () {this.func1()}是一个匿名函数，因为匿名函数没有办法被其他对象调用，所以匿名函数的 this 永远指向 window。PS:匿名函数只能通过自执行或被其他函数调用，比如例子中的setTimeout
setTimeout 的对象是 window，但是在 window 中并没有 func1 函数，所以会报错
箭头函数
“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”
箭头函数的 this 始终指向函数定义时的 this，而非执行时
var name = "windowsName";
var a = {
name : "name",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( () => {
this.func1()
},100);
}
};
a.func2() // name 在函数内部使用 _this = this
将函数的对象保存在变量_this中，用_this代替this来调用，指向就不会改变了
var name = "windowsName";
var a = {
name : "name",
func1: function () {
console.log(this.name)
},
func2: function () {
var _this = this;
setTimeout( function() {
_this.func1()
},100);
}
};
a.func2() // name 使用 apply、call、bind
apply
var a = {
name : "name",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.apply(a),100);
}
};
a.func2() // name apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数
语法：
fun.apply(thisArg, [argsArray])
- thisArg：在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
- argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。
call
var a ={
name : "name",
fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.apply(a,[1,2]) // 3
var a ={
name : "name",
fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.call(a,1,2) // 3 apply 和 call 基本类似，他们的区别只是传入的参数不同。call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。
语法：
fun.call(thisArg, arg1, arg2, ...)
bind
var a = {
name : "name",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.bind(a)(),100);
}
};
a.func2() // name bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值。个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。
可以看出，bind 是创建一个新的函数，必须要手动去调用：
var a ={
name : "name",
fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.bind(a,1,2)() // 3 注意：
- 在this的指向中，使用构造器调用模式（
new）的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式（obj.fun（）），然后是函数调用模式（fun()指向全局变量）。
同程旅行工作强度 19人发布
