隱式綁定

關(guān)于this，一般來(lái)說(shuō)，誰(shuí)調(diào)用了方法，該方法的this就指向誰(shuí)，如：

function foo(){ 
    console.log(this.a) 
} 
 
var a = 3; 
 
var obj = { 
    a: 2, 
    foo: foo 
}; 
 
obj.foo(); // 輸出2,因?yàn)槭莖bj調(diào)用的foo，所以foo的this指向了obj，而obj.a = 2 

如果存在多次調(diào)用，對(duì)象屬性引用鏈只有上一層或者說(shuō)最后一層在調(diào)用位置中起作用，如：

function foo() { 
    console.log( this.a ) 
} 
 
var obj2 = {  
    a: 42, 
    foo: foo 
} 
 
var obj1 = { 
    a: 2, 
    obj2: obj2 
} 
 
obj1.obj2.foo(); // 42 

隱式丟失

一個(gè)最常見(jiàn)的this綁定問(wèn)題就是被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，也就是說(shuō)他回應(yīng)用默認(rèn)綁定，從而把this綁定到全局對(duì)象或者undefined上，取決于是否是嚴(yán)格模式。

function foo() { 
    console.log( this.a ) 
} 
 
var obj1 = { 
    a: 2, 
    foo: foo 
} 
 
var bar = obj1.foo; // 函數(shù)別名！ 
 
var a = "oops, global"; // a是全局對(duì)象的屬性 
 
bar(); // "oops, global" 

雖然bar是obj.foo的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身，因此此時(shí)的bar()其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定

一個(gè)更微妙、更常見(jiàn)并且更出乎意料的情況發(fā)生在傳入回調(diào)函數(shù)時(shí)：

function foo() { 
    console.log( this.a ) 
} 
 
function doFoo( fn ){ 
    // fn 其實(shí)引用的是 foo 
    fn(); // <-- 調(diào)用位置！ 
} 
 
var obj = { 
    a: 2, 
    foo: foo 
} 
 
var a = "oops, global"; // a是全局對(duì)象的屬性 
 
doFoo( obj.foo ); // "oops, global" 

參數(shù)傳遞其實(shí)就是一種隱式賦值，因此我們傳入函數(shù)時(shí)也會(huì)被隱式賦值，所以結(jié)果和上一個(gè)例子一樣，如果把函數(shù)傳入語(yǔ)言內(nèi)置的函數(shù)而不是傳入自己聲明的函數(shù)(如setTimeout等)，結(jié)果也是一樣的

顯式綁定

簡(jiǎn)單的說(shuō)，就是指定this，如：call、apply、bind、new綁定等

硬綁定

function foo( something ) { 
    console.log( this.a, something) 
    return this.a + something 
} 
 
var obj = { 
    a: 2 
} 
 
var bar = function() { 
    return foo.apply( obj, arguments) 
} 
 
var b = bar(3); // 2 3 
console.log(b); // 5 

這里簡(jiǎn)單做一下解釋： 在bar函數(shù)中，foo使用apply函數(shù)綁定了obj，也就是說(shuō)foo中的this將指向obj，與此同時(shí)，使用arguments(不限制傳入?yún)?shù)的數(shù)量)作為參數(shù)傳入foo函數(shù)中;所以在運(yùn)行bar(3)的時(shí)候，首先輸出obj.a也就是2和傳入的3，然后foo返回了兩者的相加值，所以b的值為5

同樣，本例也可以使用bind:

function foo( something ) { 
    console.log( this.a, something) 
    return this.a + something 
} 
 
var obj = { 
    a: 2 
} 
 
var bar = foo.bind(obj) 
 
var b = bar(3); // 2 3 
console.log(b); // 5 

new綁定

在傳統(tǒng)面向類的語(yǔ)言中，使用new初始化類的時(shí)候會(huì)調(diào)用類中的構(gòu)造函數(shù)，但是JS中new的機(jī)制實(shí)際上和面向類和語(yǔ)言完全不同。

使用new來(lái)調(diào)用函數(shù)，或者說(shuō)發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作：

• 創(chuàng)建(或者說(shuō)構(gòu)造)一個(gè)全新的對(duì)象
• 這個(gè)新對(duì)象會(huì)被執(zhí)行[[Prototype]]連接
• 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this
• 如果函數(shù)沒(méi)有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)會(huì)自動(dòng)返回這個(gè)新對(duì)象 如：

function foo(a){ 
    this.a = a 
} 
 
var bar = new foo(2); 
console.log(bar.a); // 2 

使用new來(lái)調(diào)用foo(…)時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到foo(…)調(diào)用中的this上。new是最后一種可以影響函數(shù)調(diào)用時(shí)this綁定行為的方法，我們稱之為new綁定。

this的優(yōu)先級(jí)

毫無(wú)疑問(wèn)，默認(rèn)綁定的優(yōu)先級(jí)是四條規(guī)則中最低的，所以我們可以先不考慮它。

隱式綁定和顯式綁定哪個(gè)優(yōu)先級(jí)更高?我們來(lái)測(cè)試一下：

function foo(a){ 
    console.log(this.a) 
} 
 
var obj1 = { 
    a: 2, 
    foo: foo 
} 
 
var obj2 = { 
    a: 3, 
    foo: foo 
} 
 
obj1.foo(); // 2 
obj2.foo(); // 3 
 
obj1.foo.call(obj2); // 3 
obj2.foo.call(obj1); // 2 

可以看到，顯式綁定優(yōu)先級(jí)更高，也就是說(shuō)在判斷時(shí)應(yīng)當(dāng)先考慮是否可以存在顯式綁定。

現(xiàn)在我們要搞清楚new綁定和隱式綁定的優(yōu)先級(jí)誰(shuí)高誰(shuí)低 ：

function foo(something){ 
    this.a = something 
} 
 
var obj1 = { 
    foo: foo 
} 
 
var obj2 = {} 
 
obj1.foo(2);  
console.log(obj1.a); // 2 
 
obj1.foo.call(obj2,3); 
console.log(obj2.a); // 3 
 
var bar = new obj1.foo(4) 
console.log(obj1.a); // 2 
console.log(bar.a); // 4 

可以看到new綁定比隱式綁定優(yōu)先級(jí)高。但是new綁定和顯式綁定誰(shuí)的優(yōu)先級(jí)更高呢?

function foo(something){ 
    this.a = something 
} 
 
var obj1 = {} 
 
var bar = foo.bind(obj1); 
bar(2); 
console.log(obj1.a); // 2 
 
var baz = new bar(3); 
console.log(obj1.a); // 2 
console.log(baz.a); // 3 

可以看到，new綁定修改了硬綁定中的this，所以new綁定的優(yōu)先級(jí)比顯式綁定更高。

之所以要在new中使用硬綁定函數(shù)，主要目的是預(yù)先設(shè)置函數(shù)的一些參數(shù)，這樣在使用new進(jìn)行初始化時(shí)就可以只傳入其余的參數(shù)。bind(…)的功能之一就是可以把除了第一個(gè)參數(shù)(第一個(gè)參數(shù)用于綁定this)之外的其他參數(shù)都傳給下層的函數(shù)(這種技術(shù)稱為“部分應(yīng)用”，是“柯里化”的一種)。舉例來(lái)說(shuō)：

function foo(p1,p2){ 
    this.val = p1 + p2; 
} 
 
// 之所以使用null是因?yàn)樵诒纠形覀儾⒉魂P(guān)心硬綁定的this是什么 
// 反正使用new時(shí)this會(huì)被修改 
var bar = foo.bind(null,'p1'); 
 
var baz = new bar('p2'); 
 
baz.val; // p1p2 
} 

柯里化:在直覺(jué)上，柯里化聲稱“如果你固定某些參數(shù)，你將得到接受余下參數(shù)的一個(gè)函數(shù)”。所以對(duì)于有兩個(gè)變量的函數(shù)yx，如果固定了 y = 2，則得到有一個(gè)變量的函數(shù) 2x

This在箭頭函數(shù)中的應(yīng)用

箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層(函數(shù)或者全局)作用域來(lái)決定this。

我們來(lái)看一下箭頭函數(shù)的詞法作用域：

function foo() { 
    // 返回一個(gè)箭頭函數(shù) 
    return (a) => { 
        // this繼承自foo() 
        console.log(this.a) 
    }; 
} 
 
var obj1 = { 
    a: 2 
}; 
 
var obj2 = { 
    a: 3 
}; 
 
var bar = foo.call(obj1); 
bar.call(obj2); // 2, 不是3！ 

foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí)foo()的this。由于foo()的this綁定到obj1，bar(引用箭頭函數(shù))的this也會(huì)綁定到obj1，箭頭函數(shù)的綁定無(wú)法被修改。(new也不行!)

總結(jié)

如果要判斷一個(gè)運(yùn)行中的函數(shù)的this綁定，就需要找到這個(gè)函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來(lái)判斷this的綁定對(duì)象。

由new調(diào)用?綁定到新創(chuàng)建的對(duì)象。

由call或者apply(或者bind)調(diào)用?綁定到指定的對(duì)象。

由上下文對(duì)象調(diào)用?綁定到那個(gè)上下文對(duì)象。

默認(rèn)：在嚴(yán)格模式下綁定到undefined，否則綁定到全局對(duì)象。

【編輯推薦】