JavaScript 中的 this 全面解析

Levy_X 2017-05-24

展開全文

隱式綁定

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

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

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

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

隱式丟失

一個最常見的this綁定問題就是被隱式綁定的函數(shù)會丟失綁定對象，也就是說他回應(yīng)用默認(rèn)綁定，從而把this綁定到全局對象或者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是全局對象的屬性 
 
bar(); // "oops, global"

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

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

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

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

顯式綁定

簡單的說，就是指定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

這里簡單做一下解釋：在bar函數(shù)中，foo使用apply函數(shù)綁定了obj，也就是說foo中的this將指向obj，與此同時，使用arguments(不限制傳入?yún)?shù)的數(shù)量)作為參數(shù)傳入foo函數(shù)中;所以在運行bar(3)的時候，首先輸出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)面向類的語言中，使用new初始化類的時候會調(diào)用類中的構(gòu)造函數(shù)，但是JS中new的機制實際上和面向類和語言完全不同。

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

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

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

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

this的優(yōu)先級

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

隱式綁定和顯式綁定哪個優(yōu)先級更高?我們來測試一下：

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)先級更高，也就是說在判斷時應(yīng)當(dāng)先考慮是否可以存在顯式綁定。

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

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)先級高。但是new綁定和顯式綁定誰的優(yōu)先級更高呢?

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)先級比顯式綁定更高。

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

function foo(p1,p2){ 
    this.val = p1 + p2; 
} 
 
// 之所以使用null是因為在本例中我們并不關(guān)心硬綁定的this是什么 
// 反正使用new時this會被修改 
var bar = foo.bind(null,'p1'); 
 
var baz = new bar('p2'); 
 
baz.val; // p1p2 
}

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

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

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

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

function foo() { 
    // 返回一個箭頭函數(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！