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 的綁定，使用開發者工具獲得調用棧，而後找到棧中第二個元素，這就是真正的調用位置。

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

綁定規則

咱們來看看在函數的執行過程當中調用位置如何決定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

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

這裏有一個微妙可是很是重要的細節，雖然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

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

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 綁定。