JavaScript this綁定過程深入詳解

本文實例形式詳細分析了JavaScript this綁定過程。分享給大家供大家參考，具體如下：

在理解this 的綁定過程之前，首先要理解調用位置：調用位置就是函數在代碼中被調用的位置（而不是聲明的位置）。只有仔細分析調用位置才能回答這個問題：這個this 到底引用的是什么？通常來說，尋找調用位置就是尋找“函數被調用的位置”，但是做起來并沒有這么簡單，因為某些編程模式可能會隱藏真正的調用位置。最重要的是要分析調用棧（就是為了到達當前執行位置所調用的所有函數）。我們關心的調用位置就在當前正在執行的函數的前一個調用中。

下面我們來看看到底什么是調用棧和調用位置：

function baz() {
// 當前調用棧是：baz
// 因此，當前調用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar 的調用位置
}
function bar() {
// 當前調用棧是baz -> bar
// 因此，當前調用位置在baz 中
console.log( "bar" );
foo(); // <-- foo 的調用位置
}
function foo() {
// 當前調用棧是baz -> bar -> foo
// 因此，當前調用位置在bar 中
console.log( "foo" );
}
baz(); // <-- baz 的調用位置

注意我們是如何（從調用棧中）分析出真正的調用位置的，因為它決定了this 的綁定。

你可以把調用棧想象成一個函數調用鏈，就像我們在前面代碼段的注釋中所寫的一樣。但是這種方法非常麻煩并且容易出錯。另一個查看調用棧的方法是使用瀏覽器的調試工具。絕大多數現代桌面瀏覽器都內置了開發者工具，其中包含JavaScript 調試器。就本例來說，你可以在工具中給foo() 函數的第一行代碼設置一個斷點，或者直接在第一行代碼之前插入一條debugger;語句。運行代碼時，調試器會在那個位置暫停，同時會展示當前位置的函數調用列表，這就是你的調用棧。因此，如果你想要分析this 的綁定，使用開發者工具得到調用棧，然后找到棧中第二個元素，這就是真正的調用位置。

綁定規則

我們來看看在函數的執行過程中調用位置如何決定this 的綁定對象。你必須找到調用位置，然后判斷需要應用下面四條規則中的哪一條。

1.默認綁定

首先要介紹的是最常用的函數調用類型：獨立函數調用。可以把這條規則看作是無法應用其他規則時的默認規則。

思考一下下面的代碼：

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

你應該注意到的第一件事是，聲明在全局作用域中的變量（比如var a = 2）就是全局對象的一個同名屬性。它們本質上就是同一個東西，并不是通過復制得到的，就像一個硬幣的兩面一樣。

接下來我們可以看到當調用foo() 時，this.a 被解析成了全局變量a。為什么？因為在本例中，函數調用時應用了this 的默認綁定，因此this 指向全局對象。

那么我們怎么知道這里應用了默認綁定呢？可以通過分析調用位置來看看foo() 是如何調用的。在代碼中，foo() 是直接使用不帶任何修飾的函數引用進行調用的，因此只能使用默認綁定，無法應用其他規則。

如果使用嚴格模式（strict mode），那么全局對象將無法使用默認綁定，因此this 會綁定到undefined：

function foo() {
"use strict";
console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined

這里有一個微妙但是非常重要的細節，雖然this 的綁定規則完全取決于調用位置，但是只有foo() 運行在非strict mode 下時，默認綁定才能綁定到全局對象；嚴格模式下與foo()的調用位置無關：

function foo() {
console.log( this.a );
}
var a = 2;
(function(){
"use strict";
foo(); // 2
})();

通常來說你不應該在代碼中混合使用strict mode 和non-strict mode。整個程序要么嚴格要么非嚴格。然而，有時候你可能會用到第三方庫，其嚴格程度和你的代碼有所不同，因此一定要注意這類兼容性細節。

2.隱式綁定

另一條需要考慮的規則是調用位置是否有上下文對象，或者說是否被某個對象擁有或者包含，不過這種說法可能會造成一些誤導。

思考下面的代碼：

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

首先需要注意的是foo() 的聲明方式，及其之后是如何被當作引用屬性添加到obj 中的。但是無論是直接在obj 中定義還是先定義再添加為引用屬性，這個函數嚴格來說都不屬于obj 對象。然而，調用位置會使用obj 上下文來引用函數，因此你可以說函數被調用時obj 對象“擁有”或者“包含”它。無論你如何稱呼這個模式，當foo() 被調用時，它的落腳點確實指向obj 對象。當函數引用有上下文對象時，隱式綁定規則會把函數調用中的this 綁定到這個上下文對象。因為調用foo() 時this 被綁定到obj，因此this.a 和obj.a 是一樣的。

對象屬性引用鏈中只有最頂層或者說最后一層會影響調用位置。舉例來說：

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 obj = {
a: 2,
foo: foo
};
var bar = obj.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(); // <-- 調用位置！
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a 是全局對象的屬性
doFoo( obj.foo ); // "oops, global"

參數傳遞其實就是一種隱式賦值，因此我們傳入函數時也會被隱式賦值，所以結果和上一個例子一樣。

如果把函數傳入語言內置的函數而不是傳入你自己聲明的函數，會發生什么呢？結果是一樣的，沒有區別：

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // a 是全局對象的屬性
setTimeout( obj.foo, 100 ); // "oops, global"
JavaScript 環境中內置的setTimeout() 函數實現和下面的偽代碼類似：
function setTimeout(fn,delay) {
// 等待delay 毫秒
fn(); // <-- 調用位置！
}

就像我們看到的那樣，回調函數丟失this 綁定是非常常見的。除此之外，還有一種情況this 的行為會出乎我們意料：調用回調函數的函數可能會修改this。在一些流行的JavaScript 庫中事件處理器常會把回調函數的this 強制綁定到觸發事件的DOM 元素上。

這在一些情況下可能很有用，但是有時它可能會讓你感到非常郁悶。遺憾的是，這些工具通常無法選擇是否啟用這個行為。

無論是哪種情況，this 的改變都是意想不到的，實際上你無法控制回調函數的執行方式，因此就沒有辦法控制會影響綁定的調用位置。之后我們會介紹如何通過固定this 來修復（這里是雙關，“修復”和“固定”的英語單詞都是fixing）這個問題。

3.顯式綁定

就像我們剛才看到的那樣，在分析隱式綁定時，我們必須在一個對象內部包含一個指向函數的屬性，并通過這個屬性間接引用函數，從而把this 間接（隱式）綁定到這個對象上。那么如果我們不想在對象內部包含函數引用，而想在某個對象上強制調用函數，該怎么做呢？JavaScript 中的“所有”函數都有一些有用的特性（這和它們的[[ 原型]] 有關——之后我們會詳細介紹原型），可以用來解決這個問題。具體點說，可以使用函數的call(..) 和apply(..) 方法。嚴格來說，JavaScript 的宿主環境有時會提供一些非常特殊的函數，它們并沒有這兩個方法。但是這樣的函數非常罕見，JavaScript 提供的絕大多數函數以及你自己創建的所有函數都可以使用call(..) 和apply(..) 方法。這兩個方法是如何工作的呢？它們的第一個參數是一個對象，它們會把這個對象綁定到this，接著在調用函數時指定這個this。因為你可以直接指定this 的綁定對象，因此我們稱之為顯式綁定。

思考下面的代碼：

function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj ); // 2

通過foo.call(..)，我們可以在調用foo 時強制把它的this 綁定到obj 上。如果你傳入了一個原始值（字符串類型、布爾類型或者數字類型）來當作this 的綁定對象，這個原始值會被轉換成它的對象形式（也就是new String(..)、new Boolean(..) 或者new Number(..)）。這通常被稱為“裝箱”。從this 綁定的角度來說，call(..) 和apply(..) 是一樣的，它們的區別體現在其他的參數上，但是現在我們不用考慮這些。可惜，顯式綁定仍然無法解決我們之前提出的丟失綁定問題。

1. 硬綁定

但是顯式綁定的一個變種可以解決這個問題。

思考下面的代碼：

function foo() {
console.log( this.a );
}
var obj = {
a:2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬綁定的bar 不可能再修改它的this
bar.call( window ); // 2

我們來看看這個變種到底是怎樣工作的。我們創建了函數bar()，并在它的內部手動調用了foo.call(obj)，因此強制把foo 的this 綁定到了obj。無論之后如何調用函數bar，它總會手動在obj 上調用foo。這種綁定是一種顯式的強制綁定，因此我們稱之為硬綁定。

硬綁定的典型應用場景就是創建一個包裹函數，傳入所有的參數并返回接收到的所有值：

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

另一種使用方法是創建一個i 可以重復使用的輔助函數：

function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// 簡單的輔助綁定函數
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
};
}
var obj = {
a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

由于硬綁定是一種非常常用的模式，所以在ES5 中提供了內置的方法Function.prototype.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

bind(..) 會返回一個硬編碼的新函數，它會把參數設置為this 的上下文并調用原始函數。

2. API調用的“上下文”

第三方庫的許多函數，以及JavaScript 語言和宿主環境中許多新的內置函數，都提供了一個可選的參數，通常被稱為“上下文”（context），其作用和bind(..) 一樣，確保你的回調函數使用指定的this。

舉例來說：

function foo(el) {
console.log( el, this.id );
}
var obj = {
id: "awesome"
};
// 調用foo(..) 時把this 綁定到obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

這些函數實際上就是通過call(..) 或者apply(..) 實現了顯式綁定，這樣你可以少些一些代碼。

4.new綁定

這是第四條也是最后一條this 的綁定規則，在講解它之前我們首先需要澄清一個非常常見的關于JavaScript 中函數和對象的誤解。在傳統的面向類的語言中，“構造函數”是類中的一些特殊方法，使用new 初始化類時會調用類中的構造函數。通常的形式是這樣的：

something = new MyClass(..);

JavaScript 也有一個new 操作符，使用方法看起來也和那些面向類的語言一樣，絕大多數開發者都認為JavaScript 中new 的機制也和那些語言一樣。然而JavaScript 中new 的機制實際上和面向類的語言完全不同。

首先我們重新定義一下JavaScript 中的“構造函數”。在JavaScript 中，構造函數只是一些使用new 操作符時被調用的函數。它們并不會屬于某個類，也不會實例化一個類。實際上，它們甚至都不能說是一種特殊的函數類型，它們只是被new 操作符調用的普通函數而已。

舉例來說，思考一下Number(..) 作為構造函數時的行為，ES5.1 中這樣描述它：

Number 構造函數

當Number 在new 表達式中被調用時，它是一個構造函數：它會初始化新創建的對象。

所以，包括內置對象函數（比如Number(..)）在內的所有函數都可以用new 來調用，這種函數調用被稱為構造函數調用。這里有一個重要但是非常細微的區別：實際上并不存在所謂的“構造函數”，只有對于函數的“構造調用”。使用new 來調用函數，或者說發生構造函數調用時，會自動執行下面的操作。

1. 創建（或者說構造）一個全新的對象。
2. 這個新對象會被執行[[ 原型]] 連接。
3. 這個新對象會綁定到函數調用的this。
4. 如果函數沒有返回其他對象，那么new 表達式中的函數調用會自動返回這個新對象。

思考下面的代碼：

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

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

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript常用函數技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。