摘要：事件處理函數(shù)中的把函數(shù)綁定到事件時(shí)，可以當(dāng)作在上增加一個(gè)函數(shù)方法，當(dāng)觸發(fā)這個(gè)事件時(shí)調(diào)用上對(duì)應(yīng)的事件方法?？偨Y(jié)在需要判斷的指向時(shí)，我們可以安裝這種思路來(lái)理解判斷在全局中函數(shù)中，若在全局中則指向全局，若在函數(shù)中則只關(guān)注這個(gè)函數(shù)并繼續(xù)判斷。

在網(wǎng)上很多文章都對(duì) Javascript 中的 this 做了詳細(xì)的介紹，但大多是介紹各個(gè)綁定方式或調(diào)用方式下 this 的指向，于是我想有一個(gè)統(tǒng)一的思路來(lái)更好理解 this 指向，使大家更好判斷，以下有部分內(nèi)容不是原理，而是一種解題思路。

call 方法允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對(duì)象。

大多數(shù)介紹 this 的文章中都會(huì)把 call 方法放到最后介紹，但此文我們要把 call 方法放在第一位介紹，并從 call 方法切入來(lái)研究 this ，因?yàn)?call 函數(shù)是顯式綁定 this 的指向，我們來(lái)看看它如何模擬實(shí)現(xiàn)（不考慮傳入 null 、 undefined 和原始值）：

Function.prototype.call = function(thisArg) {
    var context = thisArg;
    var arr = [];
    var result;

    context.fn = this;

    for (let i = 1, len = arguments.length; i < len; i++) {
        arr.push("arguments[" + i + "]");
    }

    result = eval("context.fn(" + arr + ")");

    delete context.fn;

    return result;
}

從以上代碼我們可以看到，把調(diào)用 call 方法的函數(shù)作為第一個(gè)參數(shù)對(duì)象的方法，此時(shí)相當(dāng)于把第一個(gè)參數(shù)對(duì)象作為函數(shù)執(zhí)行的上下文環(huán)境，而 this 是指向函數(shù)執(zhí)行的上下文環(huán)境的，因此 this 就指向了第一個(gè)參數(shù)對(duì)象，實(shí)現(xiàn)了 call 方法切換函數(shù)執(zhí)行上下文環(huán)境的功能。

在模擬 call 方法的時(shí)候，我們使用了對(duì)象方法來(lái)改變 this 的指向。調(diào)用對(duì)象中的方法時(shí)，會(huì)把對(duì)象作為方法的上下文環(huán)境來(lái)調(diào)用。

既然 this 是指向執(zhí)行函數(shù)的上下文環(huán)境的，那我們先來(lái)研究一下調(diào)用函數(shù)時(shí)的執(zhí)行上下文情況。

下面我門(mén)來(lái)看看調(diào)用對(duì)象方法時(shí)執(zhí)行上下文是如何的：

var foo = {
    x : 1,
    getX: function(){
        console.log(this.x);
    }
}
foo.getX();

從上圖中，我們可以看出getX方法的調(diào)用者的上下文是foo，因此getX方法中的 this 指向調(diào)用者上下文foo，轉(zhuǎn)換成 call 方法為foo.getX.call(foo)。

下面我們把其他函數(shù)的調(diào)用方式都按調(diào)用對(duì)象方法的思路來(lái)轉(zhuǎn)換。

function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = new Foo();
foo.getX();

執(zhí)行 new 如果不考慮原型鏈，只考慮上下文的切換，就相當(dāng)于先創(chuàng)建一個(gè)空的對(duì)象，然后把這個(gè)空的對(duì)象作為構(gòu)造函數(shù)的上下文，再去執(zhí)行構(gòu)造函數(shù)，最后返回這個(gè)對(duì)象。

var newMethod = function(func){
    var context = {};
    func.call(context);
    return context;
}
function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = newMethod(Foo);
foo.getX();

DOMElement.addEventListener("click", function(){
    console.log(this);
});

把函數(shù)綁定到DOM事件時(shí)，可以當(dāng)作在DOM上增加一個(gè)函數(shù)方法，當(dāng)觸發(fā)這個(gè)事件時(shí)調(diào)用DOM上對(duì)應(yīng)的事件方法。

DOMElement.clickHandle = function(){
    console.log(this);
}
DOMElement.clickHandle();

var x = 1;
function getX(){
    console.log(this.x);
}
getX();

這種情況下，我們創(chuàng)建一個(gè)虛擬上下文對(duì)象，然后普通函數(shù)作為這個(gè)虛擬上下文對(duì)象的方法調(diào)用，此時(shí)普通函數(shù)中的this就指向了這個(gè)虛擬上下文。

那這個(gè)虛擬上下文是什么呢？在非嚴(yán)格模式下是全局上下文，瀏覽器里是 window ，NodeJs里是 Global ；在嚴(yán)格模式下是 undefined 。

var x = 1;
function getX(){
    console.log(this.x);
}

[viturl context].getX = getX;
[viturl context].getX();

var x = 1;
var foo = {
    x: 2,
    y: 3,
    getXY: function(){
        (function(){
            console.log("x：" + this.x);
            console.log("y：" + this.y); 
        })();
    }
}
foo.getXY();

這段代碼的上下文如下圖：

這里需要注意的是，我們?cè)傺芯亢瘮?shù)中的 this 指向時(shí)，只需要關(guān)注 this 所在的函數(shù)是如何調(diào)用的， this 所在函數(shù)外的函數(shù)調(diào)用都是浮云，是不需要關(guān)注的。因此在所有的圖示中，我們只需要關(guān)注紅色框中的內(nèi)容。

因此這段代碼我們關(guān)注的部分只有:

(function(){
    console.log(this.x);
})();

與普通函數(shù)調(diào)用一樣，創(chuàng)建一個(gè)虛擬上下文對(duì)象，然后普通函數(shù)作為這個(gè)虛擬上下文對(duì)象的方法立即調(diào)用，匿名函數(shù)中的 this 也就指向了這個(gè)虛擬上下文。

var x = 1;
var foo = {
    x: 2,
    getX: function(){
        console.log(this.x);
    }
}
setTimeout(foo.getX, 1000);

函數(shù)參數(shù)是值傳遞的，因此上面代碼等同于以下代碼：

var getX = function(){
    console.log(this.x);
};
setTimeout(getX, 1000);

然后我們又回到了普通函數(shù)調(diào)用的問(wèn)題。

全局中的 this 指向全局的上下文

var x = 1;
console.log(this.x);

var x = 1;
var a = {
    x: 2,
    b: function(){
        return function(){
            return function foo(){
                console.log(this.x);
            }        
        }
    }
};

(function(){
    var x = 3;
    a.b()()();
})();

看到上面的情況是有很多個(gè)函數(shù)，但我們只需要關(guān)注 this 所在函數(shù)的調(diào)用方式，首先我們來(lái)簡(jiǎn)化一下如下：

var x = 1;
(function(){
    var x = 3;
    var foo = function(){
        console.log(this.x);
    }
    foo();
});

this 所在的函數(shù) foo 是個(gè)普通函數(shù)，我們創(chuàng)建一個(gè)虛擬上下文對(duì)象，然后普通函數(shù)作為這個(gè)虛擬上下文對(duì)象的方法立即調(diào)用。因此這個(gè) this指向了這個(gè)虛擬上下文。在非嚴(yán)格模式下是全局上下文，瀏覽器里是 window ，NodeJs里是 Global ；在嚴(yán)格模式下是 undefined 。

在需要判斷 this 的指向時(shí)，我們可以安裝這種思路來(lái)理解：

判斷 this 在全局中OR函數(shù)中，若在全局中則 this 指向全局，若在函數(shù)中則只關(guān)注這個(gè)函數(shù)并繼續(xù)判斷。

判斷 this 所在函數(shù)是否作為對(duì)象方法調(diào)用，若是則 this 指向這個(gè)對(duì)象，否則繼續(xù)操作。

創(chuàng)建一個(gè)虛擬上下文，并把this所在函數(shù)作為這個(gè)虛擬上下文的方法，此時(shí) this 指向這個(gè)虛擬上下文。

在非嚴(yán)格模式下虛擬上下文是全局上下文，瀏覽器里是 window ，Node.js里是 Global ；在嚴(yán)格模式下是 undefined 。

圖示如下：

歡迎關(guān)注：Leechikit
原文鏈接：segmentfault.com
到此本文結(jié)束，歡迎提問(wèn)和指正。
寫(xiě)原創(chuàng)文章不易，若本文對(duì)你有幫助，請(qǐng)點(diǎn)贊、推薦和關(guān)注作者支持。