this的指向:
es5 中，this 的指向并不是在创建的时候就可以确定的， this 永远指向最后调用它的那个对象。
var name = "windowsName";
function a() {
var name = "Cherry";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
注：这里的 a()，就相当于 window.a()；所以最后 this 的指向始终是 window 对象。
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
a.fn();
注：在这个例子中，函数 fn 是对象 a 调用的，所以打印的值就是 a 中的 name 的值。
var name = "windowsName";
var a = {
name: "Cherry", // 如果这里注释掉，this.name 就会返回 undefined。
fn : function () {
console.log(this.name); // Cherry
}
}
window.a.fn();
注：this 永远指向最后调用它的那个对象，所以这里 this 仍然指向 a 对象。
var name = "windowsName";
var a = {
name : null,
// name: "Cherry",
fn : function () {
console.log(this.name); // windowsName
}
}
var f = a.fn;
f();
注：fn 虽然被赋值给 a 对象了， 但是并没有被调用， 最后仍然是被 window 调用的。所以 this 指向的也就是 window。
怎么改变 this 的指向:
- 使用箭头函数。
- 在函数内部使用_this = this。
- 使用 apply、call、bind。
- new 实例化一个对象。
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
},100);
}
};
a.func2() // this.func1 is not a function
注：因为这里的 setTimeout() 函数内，this 指向的是 window，而 window 对象是不包含 func1。
箭头函数的 this
箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( () => {
this.func1()
},100);
}
};
a.func2() // Cherry
注：这里的箭头函数内的 this 的始终是 a 对象，所以不会报错。
在函数内部使用 _this = this
var name = "windowsName";
var a = {
name : "Cherry",
func1: function () {
console.log(this.name)
},
func2: function () {
var _this = this;
setTimeout( function() {
_this.func1()
},100);
}
};
a.func2() // Cherry
注：这里将 this 提前保存在 _this 里面了，所以 this 始终指向 a 对象。
