【第765期】你不懂JS：this豁然開朗！

前言

昨天第一篇分享就被@燭火星光發現是跟《你不知道的javascript》上冊（一看就是看過書的），沒看過書的童鞋也不要緊，能夠跟着早讀君天天看一篇。今天繼續由前端早讀課專欄做者@HetfieldJoe帶來的翻譯分享。

正文從這開始～

這是 你不懂JS：this與對象原型 第一章：this豁然開朗！

在【第764期】你不懂JS：this是什麼？中，咱們摒棄了種種對this的誤解，而且學習了this是一個徹底根據調用點（函數是如何被調用的）而爲每次函數調用創建的綁定。

調用點（Call-site）

爲了理解this綁定，咱們不得不理解調用點：函數在代碼中被調用的位置（不是被聲明的位置）。咱們必須考察調用點來回答這個問題：這個this指向什麼？

通常來講尋找調用點就是：「找到一個函數是在哪裏被調用的」，但不老是那麼簡單，好比某些特定的編碼模式會使 真正的 調用點變得不那麼明確。

考慮 調用棧（call-stack） （使咱們到達當前執行位置而被調用的全部方法的堆棧）是十分重要的。咱們關心的調用點就位於當前執行中的函數 以前 的調用。

咱們來展現一下調用棧和調用點：

在分析代碼來尋找（從調用棧中）真正的調用點時要當心，由於它是影響this綁定的惟一因素。

注意： 你能夠經過按順序觀察函數的調用鏈在你的大腦中創建調用棧的視圖，就像咱們在上面代碼段中的註釋那樣。可是這很痛苦並且易錯。另外一種觀察調用棧的方式是使用你的瀏覽器的調試工具。大多數現代的桌面瀏覽器都內建開發者工具，其中就包含JS調試器。在上面的代碼段中，你能夠在調試工具中爲foo()函數的第一行設置一個斷點，或者簡單的在這第一行上插入一個debugger語句。當你運行這個網頁時，調試工具將會中止在這個位置，而且向你展現一個到達這一行以前全部被調用過的函數的列表，這就是你的調用棧。因此，若是你想調查this綁定，可使用開發者工具取得調用棧，以後從上向下找到第二個記錄，那就是你真正的調用點。

僅僅是規則

如今咱們將注意力轉移到調用點 如何 決定在函數執行期間this指向哪裏。

你必須考察call-site並斷定4種規則中的哪個適用。咱們將首先獨立的解釋一下這4種規則中的每一種，以後咱們來展現一下若是有多種規則能夠適用調用點時，它們的優先順序。

默認綁定（Default Binding）

咱們要考察的第一種規則來源於函數調用的最多見的狀況：獨立函數調用。能夠認爲這種this規則是在沒有其餘規則適用時的默認規則。

考慮這個代碼段：

第一點要注意的，若是你尚未察覺到，是在全局做用域中的聲明變量，也就是var a = 2，是全局對象的同名屬性的同義詞。它們不是互相拷貝對方，它們 就是 彼此。正如一個硬幣的兩面。

第二，咱們看到當foo()被調用時，this.a解析爲咱們的全局變量a。爲何？由於在這種狀況下，對此方法調用的this實施了 默認綁定，因此使this指向了全局對象。

咱們怎麼知道這裏適用 默認綁定 ？咱們考察調用點來看看foo()是如何被調用的。在咱們的代碼段中，foo()是被一個直白的，毫無修飾的函數引用調用的。沒有其餘的咱們將要展現的規則適用於這裏，因此 默認綁定 在這裏適用。

若是strict mode在這裏生效，那麼對於 默認綁定 來講全局對象是不合法的，因此this將被設置爲undefined。

一個微妙可是重要的細節是：即使全部的this綁定規則都是徹底基於調用點，若是foo()的 內容 沒有在strint mode下執行，對於 默認綁定 來講全局對象是 惟一 合法的；foo()的call-site的strict mode狀態與此無關。

注意： 在你的代碼中故意混用strict mode和非strict mode一般是讓人皺眉頭的。你的程序總體可能應當不是 Strict 就是 非Strict。然而，有時你可能會引用與你的 Strict 模式不一樣的第三方包，因此對這些微妙的兼容性細節要多加當心。

隱含綁定（Implicit Binding）

另外一種要考慮的規則是：調用點是否有一個環境對象（context object），也稱爲擁有者（owning）或容器（containing）對象，雖然這些名詞可能有些誤導人。

考慮這段代碼：

首先，注意foo()被聲明而後做爲引用屬性添加到obj上的方式。不管foo()是否一開始就在obj上被聲明，仍是後來做爲引用添加（如上面代碼所示），都是這個 函數 被obj所「擁有」或「包含」。

然而，調用點 使用 obj環境來 引用 函數，因此你 能夠說 obj對象在函數被調用的時間點上「擁有」或「包含」這個 函數引用。

不論你怎樣稱呼這個模式，在foo()被調用的位置上，它被冠以一個指向obj的對象引用。當一個方法引用存在一個環境對象時，隱式綁定 規則會說：是這個對象應當被用於這個函數調用的this綁定。

由於obj是foo()調用的this，因此this.a就是obj.a的同義詞。

只有對象屬性引用鏈的最後一層是影響調用點的。好比：

隱含地丟失（Implicitly Lost）

this綁定最常讓人沮喪的事情之一，就是當一個 隱含綁定 丟失了它的綁定，這一般意味着它會退回到 默認綁定， 根據strict mode的狀態，結果不是全局對象就是undefined。

考慮這段代碼：

儘管bar彷佛是obj.foo的引用，但實際上它只是另外一個foo本身的引用而已。另外，起做用的調用點是bar()，一個直白，毫無修飾的調用，所以 默認綁定 適用於這裏。

這種狀況發生的更加微妙，更常見，更意外的方式，是當咱們考慮傳遞一個回調函數時：

參數傳遞僅僅是一種隱含的賦值，並且由於咱們在傳遞一個函數，它是一個隱含的引用賦值，因此最終結果和咱們前一個代碼段同樣。

那麼若是接收你所傳遞迴調的函數不是你的，而是語言內建的呢？沒有區別，一樣的結果。

把這個粗糙的，理論上的setTimeout()假想實現當作JavaScript環境內建的實現的話：

正如咱們剛剛看到的，咱們的回調函數丟掉他們的this綁定是十分常見的事情。可是另外一種this使咱們吃驚的方式是，接收咱們的回調的函數故意改變調用的this。那些很受歡迎的事件處理JavaScript包就十分喜歡強制你的回調的this指向觸發事件的DOM元素。雖然有時這頗有用，但其餘時候這簡直能氣死人。不幸的是，這些工具不多給你選擇。

無論哪種意外改變this的方式，你都不能真正地控制你的回調函數引用將如何被執行，因此你（還）沒有辦法控制調用點給你一個故意的綁定。咱們很快就會看到一個方法，經過 固定 this來解決這個問題。

明確綁定（Explicit Binding）

用咱們剛看到的 隱含綁定，咱們不得不改變目標對象使它自身包含一個對函數的引用，然後使用這個函數引用屬性來間接地（隱含地）將this綁定到這個對象上。

可是，若是你想強制一個函數調用使用某個特定對象做爲this綁定，而不在這個對象上放置一個函數引用屬性呢？

JavaScript語言中的「全部」函數都有一些工具（經過他們的[[Prototype]]——待會兒詳述）能夠用於這個任務。特別是，函數擁有call(..)和apply(..)方法。從技術上講，JavaScript宿主環境有時會提供一些很特別的函數，它們沒有這些功能，但這不多見。絕大多數被提供的函數，固然還有你將建立的全部的函數，均可以訪問call(..)和apply(..)。

這些工具如何工做？它們接收的第一個參數都是一個用於this的對象，以後使用這個指定的this來調用函數。由於你已經直接指明你想讓this是什麼，因此咱們稱這種方式爲 明確綁定（explicit binding)。

考慮這段代碼：

經過foo.call(..)使用 明確綁定 來調用foo，容許咱們強制函數的this指向obj。

若是你傳遞一個簡單原始類型值（string，boolean，或 number類型）做爲this綁定，那麼這個原始類型值會被包裝在它的對象類型中（分別是new String(..)，new Boolean(..)，或new Number(..)）。這一般稱爲「boxing（封箱）」。

注意： 就this綁定的角度講，call(..)和apply(..)是徹底同樣的。它們確實在處理其餘參數上的方式不一樣，但那不是咱們當前關心的。

不幸的是，單獨依靠 明確綁定 仍然不能爲咱們先前提到的問題提供解決方案，也就是函數「丟失」本身本來的this綁定，或者被第三方框架覆蓋，等等問題。

硬綁定（Hard Binding）

可是有一個 明確綁定 的變種確實能夠實現這個技巧。考慮這段代碼：

咱們來看看這個變種是如何工做的。咱們建立了一個函數bar()，在它的內部手動調用foo.call(obj)，由此強制this綁定到obj並調用foo。不管你事後怎樣調用函數bar，它老是手動使用obj調用foo。這種綁定即明確又堅決，因此咱們稱之爲 硬綁定（hard binding）

用 硬綁定 將一個函數包裝起來的最典型的方法，是爲全部傳入的參數和傳出的返回值建立一個通道：

另外一種表達這種模式的方法是建立一個可複用的幫助函數：

因爲 硬綁定 是一個如此經常使用的模式，它已做爲ES5的內建工具提供：Function.prototype.bind，像這樣使用：

bind(..)返回一個硬編碼的新函數，它使用你指定的this環境來調用本來的函數。

注意： 在ES6中，bind(..)生成的硬綁定函數有一個名爲.name的屬性，它源自於原始的 目標函數（target function）。舉例來講：bar = foo.bind(..)應該會有一個bar.name屬性，它的值爲"bound foo"，這個值應當會顯示在調用棧軌跡的函數調用名稱中。

API調用的「環境」

確實，許多包中的函數，和許多在JavaScript語言以及宿主環境中的內建函數，都提供一個可選參數，一般稱爲「環境（context）」，這種設計做爲一種替代方案來確保你的回調函數使用特定的this而沒必要非得使用bind(..)。

舉例來講：

從內部來講，這種類型的函數幾乎能夠肯定是經過call(..)或apply(..)使用了 明確綁定 來節省你的麻煩。

new綁定（new Binding）

第四種也是最後一種this綁定規則，須要咱們從新思考關於JavaScript中對函數和對象的常見誤解。

在傳統的面向類語言中，「構造器」是附着在類上的一種特殊方法，當使用new操做符來初始化一個類時，這個類的構造器就會被調用。一般看起來像這樣：

JavaScript擁有new操做符，並且它使用的代碼模式看起來基本和咱們在面向類語言中看到的同樣；大多數開發者猜想JavaScript機制是某種類似的東西。可是，實際上JavaScript的機制和new在JS中的用法所暗示的面向類的功能 沒有任何聯繫。

首先，讓咱們從新定義JavaScript的「構造器」是什麼。在JS中，構造器 僅僅是一個函數，它們偶然地被前置的new操做符調用。它們不依附於類，它們也不初始化一個類。它們甚至不是一種特殊的函數類型。它們本質上只是通常的函數，在被使用new來調用時改變了行爲。

好比，Number(..)函數做爲一個構造器來講，引用ES5.1的語言規範：

15.7.2 The Number 構造器

當Number做爲new表達式的一部分被調用時，它是一個構造器：它初始化這個新建立的對象。

因此，任何關聯在對象上的函數，包括像Number(..)（見第三章）這樣的內建對象函數均可以在前面加上new來被調用，這使函數調用成爲一個 構造器調用（constructor call）。這是一個重要且微妙的區別：實際上不存在「構造器函數」這樣的東西，而只有函數的構造器調用。

當在函數前面被加入new調用時，也就是構造器調用時，下面這些事情會自動完成：

• 一個全新的對象會憑空建立（就是被構建）

• 這個新構建的對象會被接入原形鏈（[[Prototype]]-linked）

• 這個新構建的對象被設置爲函數調用的this綁定

• 除非函數返回一個它本身的其餘 對象，這個被new調用的函數將 自動 返回這個新構建的對象。

步驟1，3和4是咱們當下要討論的。咱們如今跳過第2步，在第五章回來討論。

考慮這段代碼：

經過在前面使用new來調用foo(..)，咱們構建了一個新的對象並這個新對象做爲foo(..)調用的this。 new是函數調用能夠綁定this的最後一種方式，咱們稱之爲 new綁定（new binding）。

一切皆有順序

如此，咱們已經揭示了函數調用中的4種this綁定規則。你須要作的 一切 就是找到調用點而後考察哪種規則適用於它。可是，若是調用點上有多種規則都適用呢？這些規則必須有一個優先順序，咱們下面就來展現這些規則以什麼樣的優先順序實施。

很顯然，默認綁定 在4種規則中擁有最低的優先權。因此咱們先把它放在一邊。

隱含綁定 和 明確綁定 哪個更優先呢？咱們來測試一下：

因此, 明確綁定 的優先權要高於 隱含綁定，這意味着你應當在考察 隱含綁定 以前 首先 考察 明確綁定 是否適用。

如今，咱們只須要搞清楚 new綁定 的優先級位於何處。

好了，new綁定 的優先級要高於 隱含綁定。那麼你以爲 new綁定 的優先級較之於 明確綁定 是高仍是低呢？

注意： new和call/apply不能同時使用，因此new foo.call(obj1)是不容許的，也就是不能直接對比測試 new綁定 和 明確綁定。可是咱們依然可使用 硬綁定 來測試這兩個規則的優先級。

在咱們進入代碼中探索以前，回想一下 硬綁定 物理上是如何工做的，也就是Function.prototype.bind(..)建立了一個新的包裝函數，這個函數被硬編碼爲忽略它本身的this綁定（無論它是什麼），轉而手動使用咱們提供的。

所以，這彷佛看起來很明顯，硬綁定（明確綁定的一種）的優先級要比 new綁定 高，並且不能被new覆蓋。

咱們檢驗一下：

哇！bar是硬綁定到obj1的，可是new bar(3)沒有想咱們期待的那樣將obj1.a變爲3。反而，硬綁定（到obj1）的bar(..)調用 能夠 被new所覆蓋。由於new被實施，咱們獲得一個名爲baz的新建立的對象，並且咱們確實看到baz.a的值爲3。

若是你回頭看看咱們的「山寨」綁定幫助函數，這很使人吃驚：

若是你推導這段幫助代碼如何工做，會發現對於new操做符調用來講沒有辦法去像咱們觀察到的那樣，將綁定到obj的硬綁定覆蓋。

可是ES5的內建Function.prototype.bind(..)更加精妙，實際上十分精妙。這裏是MDN網頁上爲bind(..)提供的polyfill（低版本兼容填補工具）：

注意： 在ES5中，就將與new一塊兒使用的硬綁定函數（參照下面來看爲何這有用）而言，上面的bind(..)polyfill與內建的bind(..)是不一樣的。由於polyfill不能像內建工具那樣，沒有.prototype就能建立函數，這裏使用了一些微妙而間接的方法來近似模擬相同的行爲。若是你打算將硬綁定函數和new一塊兒使用並且依賴於polyfill，應當多加當心。

容許new進行覆蓋的部分是這裏：

咱們不會實際深刻解釋這個花招兒是如何工做的（這很複雜並且超出了咱們當前的討論範圍），但實質上這個工具判斷硬綁定函數是不是用new被調用的（結果是用一個它新構建的對象做爲this），若是是，它就用那個新構建的this而非先前爲this指定的 硬綁定。

爲何new能夠覆蓋 硬綁定 這件事頗有用？

這種行爲的主要緣由是，建立一個實質上忽略this的 硬綁定 而預先設置一部分或全部的參數的函數（這個函數能夠與new一塊兒使用來構建對象）。bind(..)的一個能力是，任何在第一個this綁定參數以後被傳入的參數，默認地做爲當前函數的標準參數（技術上這稱爲「局部應用（partial application）」，是一種「柯里化（currying）」）。

好比：

斷定 this

如今，咱們能夠按照優先順序來總結一下從函數調用的調用點來斷定this的規則了。按照這個順序來問問題，而後在第一個規則適用的地方停下。

函數是和new一塊兒被調用的嗎（new綁定）？若是是，this就是新構建的對象。

var bar = new foo()

函數是用call或apply被調用（明確綁定），甚至是隱藏在bind 硬綁定 之中嗎？若是是，this就是明確指定的對象。

var bar = foo.call( obj2 )

函數是用環境對象（也稱爲擁有者或容器對象）被調用的嗎（隱含綁定）？若是是，this就是那個環境對象。

var bar = obj1.foo()

不然，使用默認的this（默認綁定）。若是在strict mode下，就是undefined，不然是global對象。

var bar = foo()

以上，就是理解對於普通的函數調用來講的this綁定規則所需的所有。是的···幾乎是所有。

綁定的特例

正如一般的那樣，對於這些「規則」有一些 例外。

在某些場景下this綁定會讓人很吃驚，好比在你試圖實施一種綁定，然而最終獲得的是 默認綁定 規則的綁定行爲（見前面的內容）。

被忽略的this

若是你傳遞null或undefined做爲call，apply或bind的this綁定參數，那麼這些值會被忽略掉，取而代之的是 默認綁定 規則將適用於這個調用。

爲何你會向this綁定故意傳遞像null這樣的值？

使用apply(..)來將一個數組散開，從而做爲函數調用的參數，是一個很常見的作法。類似地，bind(..)能夠curry參數（預設值），也是頗有幫助的。

這兩種工具都要求第一個參數是this綁定。若是想讓使用的函數不關心this，你就須要一個佔位值，並且正如這個代碼段中展現的，null看起來是一個合理的選擇。

注意： 雖然咱們在這本書中沒有涵蓋，可是ES6中有一個擴散操做符：...。它讓你無需使用apply(..)而在語法上將一個數組「散開」做爲參數，好比foo(...[1,2])表示foo(1,2)——若是this綁定沒有必要，能夠在語法上回避它。不幸的是，柯里化在ES6中沒有語法上的替代品，因此bind(..)調用的this參數依然須要注意。

但是，在你不關心this綁定而一直使用null的時候，有些潛在的「危險」。若是你這樣處理一些函數調用（好比，不歸你管控的第三方包），並且那些函數確實使用了this引用，那麼 默認綁定 規則意味着它可能會不經意間引用（或者改變，更糟糕！）global對象（在瀏覽器中是window）。

很顯然，這樣的陷阱會致使多種 很是難 診斷和追蹤的Bug。

更安全的this

也許某些「更安全」的實踐是：爲了this而傳遞一個特別創建好的對象，這個對象保證不會對你的程序產生反作用。從網絡學（或軍事）上借用一個詞，咱們能夠創建一個「DMZ」（非軍事區）對象——只不過是一個徹底爲空，沒有委託（見第五，六章）的對象。

若是咱們爲了忽略本身認爲不用關心的this綁定，而老是傳遞一個DMZ對象，咱們就能夠肯定任何對this的隱藏或意外的使用將會被限制在這個空對象中，也就是說這個對象將global對象和反作用隔離開來。

由於這個對象是徹底爲空的，我我的喜歡給他一個變量名爲ø（空集合的數學符號的小寫）。在許多鍵盤上（好比Mac的美式鍵盤），這個符號能夠很容易地用⌥+o (option+o)打出來。有些系統還容許你爲某個特殊符號設置快捷鍵。若是你不喜歡ø符號，或者你的鍵盤沒那麼好打，你固然能夠叫它任意你但願的名字。

不管你叫它什麼，建立 徹底爲空的對象 的最簡單方法就是Object.create(null)（見第五章）。Object.create(null)和{}很類似，可是沒有Object.prototype的委託，因此它比{}「空得更完全」。

不只在功能上更「安全」，ø還會在代碼風格上產生些好處，它在語義上可能會比null更清晰的表達「我想讓this爲空」。固然，你能夠隨本身喜歡來稱呼你的DMZ對象。

間接

另一個要注意的是，你能夠（故意或非故意地！）建立對函數的「間接引用（indirect reference）」，在那樣的狀況下，當那個函數引用被調用時，默認綁定 規則也會適用。

一個最多見的 間接引用 產生方式是經過賦值：

賦值表達式p.foo = o.foo的 結果值 是一個恰好指向底層函數對象的引用。如此，起做用的調用點就是foo()，而非你期待的p.foo()或o.foo()。根據上面的結果，默認綁定 規則適用。

提醒： 不管你如何獲得適用 默認綁定 的函數調用，被調用函數的 內容 的strict mode狀態——而非函數的調用點——決定了this引用的值：不是global對象（在非strict mode下），就是undefined（在strict mode下）。

軟化綁定（Softening Binding）

咱們以前看到 硬綁定 是一種經過強制函數綁定到特定的this上，來防止函數調用在不經意間退回到 默認綁定 的策略（除非你用new去覆蓋它！）。問題是，硬綁定 極大地下降了函數的靈活性，阻止咱們手動使用 隱式綁定 或後續的 明確綁定 嘗試來覆蓋this。

若是有這樣的辦法就行了：爲 默認綁定 提供不一樣的默認值（不是global或undefined），同時保持函數能夠經過 隱式綁定 或 明確綁定 技術來手動綁定this。

咱們能夠構建一個所謂的 軟綁定 工具來模擬咱們指望的行爲。

這裏提供的softBind(..)工具的工做方式和ES5內建的bind(..)工具很類似，除了咱們的 軟綁定 行爲。他用一種邏輯將指定的函數包裝起來，這個邏輯在函數調用時檢查this，若是它是global或undefined，就使用預先指定的 默認值 （obj），不然保持this不變。它也提供了可選的柯里化行爲（見先前的bind(..)討論）。

咱們來看看它的用法：

軟綁定版本的foo()函數能夠如展現的那樣被手動this綁定到obj2或obj3，若是 默認綁定 適用時會退到obj。

詞法this

咱們剛剛涵蓋了通常函數遵照的4種規則。可是ES6引入了一種不適用於這些規則特殊的函數：箭頭函數（arrow-function）。

箭頭函數不是經過function聲明的，而是經過所謂的「大箭頭」操做符：=>。與使用4種標準的this規則不一樣的是，箭頭函數從封閉它的（function或global）做用域採用this綁定。

咱們來展現一下箭頭函數的詞法做用域：

在foo()中建立的箭頭函數在詞法上捕獲foo()調用時的this，無論它是什麼。由於foo()被this綁定到obj1，bar（被返回的箭頭函數的一個引用）也將會被this綁定到obj1。一個箭頭函數的詞法綁定是不能被覆蓋的（就連new也不行！）。

最多見的用法是用於回調，好比事件處理器或計時器：

雖然箭頭函數提供除了使用bind(..)外，另一種在函數上來確保this的方式，這看起來很吸引人，但重要的是要注意它們本質是用被普遍理解的詞法做用域來禁止了傳統的this機制。在ES6以前，咱們爲此已經有了至關經常使用的模式，這些模式幾乎和ES6的箭頭函數的精神沒有區別：

雖然對不想用bind(..)的人來講self = this和箭頭函數都是看起來不錯的「解決方案」，但它們實質上逃避了this而非理解和接受它。

若是你發現你在寫this風格的代碼，可是大多數或所有時候，你都用詞法上的self = this或箭頭函數「技巧」抵禦this機制，那麼也許你應該：

僅使用詞法做用域並忘掉虛僞的this風格代碼。

徹底接受this風格機制，包括在必要的時候使用bind(..)，並嘗試避開self = this和箭頭函數的「詞法this」技巧。

一個程序能夠有效地同時利用兩種風格的代碼（詞法和this），可是在同一個函數內部，特別是對同種類型的查找，混合這兩種機制一般是自找很難維護的代碼，並且多是聰明過了頭。

複習

爲執行中的函數斷定this綁定須要找到這個函數的直接調用點。找到以後，4種規則將會以 這個 優先順序施用於調用點：

• 被new調用？使用新構建的對象。

• 被call或apply（或 bind）調用？使用指定的對象。

• 被持有調用的環境對象調用？使用那個環境對象。

• 默認：strict mode下是undefined，不然就是全局對象。

當心偶然或不經意的 默認綁定 規則調用。若是你想「安全」地忽略this綁定，一個像ø = Object.create(null)這樣的「DMZ」對象是一個很好的佔位值，來保護global對象不受意外的反作用影響。

與這4種綁定規則不一樣，ES6的箭頭方法使用詞法做用域來決定this綁定，這意味着它們採用封閉他們的函數調用做爲this綁定（不管它是什麼）。它們實質上是ES6以前的self = this代碼的語法替代品。