JavaScript 中的 this 解析——兄弟連教育

隱式綁定

關於this，一般來說，誰調用了方法，該方法的this就指向誰，如：

function foo(){

console.log(this.a)

}

var a = 3;

var obj = {

a: 2,

foo: foo

};

obj.foo(); // 輸出2,因為是obj調用的foo，所以foo的this指向了obj，而obj.a = 2

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

function foo() {

console.log( this.a )

}

var obj2 = {

a: 42,

foo: foo

}

var obj1 = {

a: 2,

obj2: obj2

}

obj1.obj2.foo(); // 42

隱式丟失

一個最常見的this綁定問題就是被隱式綁定的函數會丟失綁定對象，也就是說他回應用默認綁定，從而把this綁定到全局對象或者undefined上，取決於是否是嚴格模式。

function foo() {

console.log( this.a )

}

var obj1 = {

a: 2,

foo: foo

}

var bar = obj1.foo; // 函數別名！

var a = "oops, global"; // a是全局對象的屬性

bar(); // "oops, global"

雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數本身，因此此時的bar()其實是一個不帶任何修飾的函數調用，因此應用了默認綁定一個更微妙、更常見並且更出乎意料的情況發生在傳入回調函數時：

function foo() {

console.log( this.a )

}

function doFoo( fn ){

// fn 其實引用的是 foo

fn(); //

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

顯式綁定

簡單的說，就是指定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函數中，foo使用apply函數綁定了obj，也就是說foo中的this將指向obj，與此同時，使用arguments（不限制傳入參數的數量）作為參數傳入foo函數中；所以在運行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綁定

在傳統面向類的語言中，使用new初始化類的時候會調用類中的構造函數，但是JS中new的機制實際上和面向類和語言完全不同。

使用new來調用函數，或者說發生構造函數調用時，會自動執行下面的操作：

創建（或者說構造）一個全新的對象

這個新對象會被執行[[Prototype]]連接

這個新對象會綁定到函數調用的this

如果函數沒有返回其他對象，那麼new表達式中的函數會自動返回這個新對象 如：

function foo(a){

this.a = a

}

var bar = new foo(2);

console.log(bar.a); // 2

使用new來調用foo(…)時，我們會構造一個新對象並把它綁定到foo(…)調用中的this上。new是最後一種可以影響函數調用時this綁定行為的方法，我們稱之為new綁定。

this的優先順序

毫無疑問，默認綁定的優先順序是四條規則中最低的，所以我們可以先不考慮它。

隱式綁定和顯式綁定哪個優先順序更高？我們來測試一下：

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

可以看到，顯式綁定優先順序更高，也就是說在判斷時應當先考慮是否可以存在顯式綁定。

現在我們要搞清楚new綁定和隱式綁定的優先順序誰高誰低 ：

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綁定比隱式綁定優先順序高。但是new綁定和顯式綁定誰的優先順序更高呢？

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(baz.a); // 3

可以看到，new綁定修改了硬綁定中的this，所以new綁定的優先順序比顯式綁定更高。

之所以要在new中使用硬綁定函數，主要目的是預先設置函數的一些參數，這樣在使用new進行初始化時就可以只傳入其餘的參數。bind(…)的功能之一就是可以把除了第一個參數（第一個參數用於綁定this）之外的其他參數都傳給下層的函數（這種技術稱為「部分應用」，是「柯里化」的一種）。舉例來說：

function foo(p1,p2){

this.val = p1 + p2;

}

// 之所以使用null是因為在本例中我們並不關心硬綁定的this是什麼

// 反正使用new時this會被修改

var bar = foo.bind(null,"p1");

var baz = new bar("p2");

baz.val; // p1p2

}

柯里化:在直覺上，柯里化聲稱「如果你固定某些參數，你將得到接受餘下參數的一個函數」。所以對於有兩個變數的函數yx，如果固定了 y = 2，則得到有一個變數的函數 2x

This在箭頭函數中的應用

箭頭函數不使用this的四種標準規則，而是根據外層（函數或者全局）作用域來決定this。

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

function foo() {

// 返回一個箭頭函數

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()內部創建的箭頭函數會捕獲調用時foo()的this。由於foo()的this綁定到obj1，bar（引用箭頭函數）的this也會綁定到obj1，箭頭函數的綁定無法被修改。（new也不行!）

總結

如果要判斷一個運行中的函數的this綁定，就需要找到這個函數的直接調用位置。找到之後就可以順序應用下面這四條規則來判斷this的綁定對象。

1.由new調用？綁定到新創建的對象。

2.由call或者apply（或者bind）調用？綁定到指定的對象。

3.由上下文對象調用？綁定到那個上下文對象。

4.默認：在嚴格模式下綁定到undefined，否則綁定到全局對象。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！