this 指的是当前对象。
如果在全局范围内使用 this，则指向当前页面 window；
如果在函数中使用this，则 this 指向什么是根据当前函数在什么对象上调用所决定的，意思就是函数中的 this 是在调用时候决定的，而不是函数定义时。
我们可以使用 call 和 apply 改变函数中 this 的具体指向。
function foo() {
console.log(this.frute);
}
// 定义一个全局变量，等同于window.frute = "banana";
var frute = "banana";
// 此时相当于 window 调用foo函数，所以foo中的this指向window；
foo(); // "banana"
window.foo() // "banana"
var obj = {
frute : "apple",
foo : foo
};
// 此时相当于 obj 调用foo函数，所以foo中的this指向 obj；
obj.foo(); // "apple"
apply 和 call 可以用来改变this的指向，如下：
function foo(){
console.log(this.frute);
}
// 定义一个全局变量，等同于window.frute = "banana";
var frute = "banana";
var obj = {
frute : "apple"
};
foo.apply(window); // "banana";
foo.call(obj); // "apple";
在JavaScript中，函数也是对象，为函数定义属性，属性也可为函数。
function foo(){
if(this === window){
console.log("this is window");
}
};
// 函数foo也是对象，可以为对象定义属性，然后属性为函数
foo.boo = function(){
if(this === foo){
console.log("this is foo");
}else if(this === window){
console.log("this is window");
}
};
// 等价于 window.foo();
foo(); // "this is window";
// 可以看到函数中this的指向调用函数的对象
foo.boo(); // "this is foo";
// 可以使用call改变函数中this指向
foo.boo.apply(window); // "this is window";
对象中嵌套函数的this指向，不是当前对象，而是window。
var name = "window";
var obj = {
name: "obj",
getName: function(){
console.log(this.name);
return function() {
console.log(this.name);
}
}
}
obj.getName()(); // "obj" "window"
有三种方法可以改变 return 函数内部this的指向问题。
- bind() 方法
var name = "window";
var obj = {
name: "obj",
getName: function(){
console.log(this.name);
return function() {
console.log(this.name);
}.bind(this);
}
}
obj.getName()(); // "obj" "obj"
- that
var name = "window";
var obj = {
name: "obj",
getName: function(){
var that = this;
console.log(this.name);
return function() {
console.log(that.name);
}
}
}
obj.getName()(); // "obj" "obj"
- ES6的箭头函数
var name = "window";
var obj = {
name: "obj",
getName: function(){
console.log(this.name);
return () => {
console.log(this.name);
}
}
}
obj.getName()(); // "obj" "obj"
