js中this的指向问题

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的指向问题。

1. 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"

2. 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"

3. ES6的箭头函数

var name = "window";
var obj = {
    name: "obj",
    getName: function(){
        console.log(this.name);
        return () => {
            console.log(this.name);
        }
    }
}
obj.getName()();  // "obj"  "obj"