我们晓得，this对象是在运行时基于实行函数的实行环境绑定：在全局函数中，this即是window，而当函数被当作某个对象的要领挪用时，this即是谁人对象。

this的运用环境分以下几种状况：

• 一般函数挪用
• 作为组织函数挪用
• 作为对象的要领来挪用
• call/apply/bind要领的挪用

一般函数挪用

纯真函数挪用属于全局挪用，this指向this指向Global对象，在浏览器着就是window对象。

var name = "the window";
function fn(){
    alert(this.name);
}
fn();    //the window

这个例子很好明白。在全局作用域中声明的变量、函数，都邑变成window对象的属性、要领，this指向window

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn() // ?
        arguments[0]() // ?
    }
}
obj.method(fn)      //10  1

这个例子就不太好明白了。这里fn依旧是纯真的函数挪用，我们晓得，每一个函数在被挪用时，都邑自动获得两个特别变量：this和arguments。内部函数搜刮这两个变量时，只会搜刮到其运动对象为止。所以这里fn中的this指向window。
别的要注意arguments是一个对象，对象属于除了点操作符还可以用中括号，arguments[0]()实际上是fn作为arguments对象的要领被挪用，this指向arguments，由于参数只要一个fn，因而length为1

var length = 10
var obj = {
    length: 5,
    method: function() {
        function fn(){
            alert(this.length)
        }
        fn();
    }
}
obj.method()     //10

再轻微变更一下代码，this依旧指向window

作为对象的要领挪用

函数被作为某个要领时，this即是谁人对象

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: fn
}
obj.method()      //5

再换一个例子

function fn(){
    alert(this.length)
}
var obj1 = {
    length: 5,
    method: fn
}
var obj2 = {
    length: 6,
    method: obj1.method
}
obj2.method()      //6

作为组织函数挪用

经由过程new操作符来挪用函数，建立一个新的对象，将组织函数的作用域给予给新对象，因而this指向这个新对象。

var name = "windowName";
function fn(name){
    this.name = name;
    this,sayName = function(){
        alert(this.name);
    }
}
fn("fnName");     //fnName

call/apply/bind要领的挪用

这三个要领都是经由过程通报参数转变函数体内的this。call和apply要领的作用雷同，函数体内的this指向的第一个参数。

var name = "window";
var o = {
    name: "object"
};

function fn(){
    alert(this.name)
}

fn.call(this);  //window
fn.call(window);  //window
fn.call(o);       //object

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
obj2.fn.call(obj1,"new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

bind要领会建立一个函数的实例，其this值会被绑定到传给bind()函数的值

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
var obj = obj2.fn.bind(obj1);
obj("new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

参考资料

• 坑爹的js笔试题
• JS中的this关键字详解

关注作者吧~