理解JavaScript的核心知識點：This

時間 2019-11-06

原文原文鏈接

Understanding JavaScript Core: This

this 是 JavaScript 中很是重要且使用最廣的一個關鍵字，它的值指向了一個對象的引用。這個引用的結果很是容易引發開發者的誤判，因此必須對這個關鍵字刨根問底。javascript

執行上下文：Execution Context

在深刻了解 this 對象以前先介紹另外一個概念：執行上下文。html

沒錯，執行上下文與 this 在本質上是兩個概念，或者說它們指代的範疇有差別，想要準確認識 this，就得先把它們區分開。java

能夠把執行上下文想象爲一個容器，其中包含了一句句待執行的代碼。代碼在這個容器中有上下行兩條路線，是由某一些特殊代碼所觸發（如函數），上行路線跳入了一個新的容器，開始在新容器中執行另外一些代碼，本容器中的後續代碼被暫時中斷；若是新容器中還有代碼會觸發上行路線，就繼續往上增長新容器，並交出控制權，層層疊加，造成了一個從底往上形式的疊羅漢，這就是 JavaScript 運行時的執行上下文棧。git

執行上下文這一抽象概念自己包含了更多有關 JavaScript 這門語言的內部機制，對於語言使用者來講是不透明的，其中與運行前的編譯規則有很大關聯，並被包含到整個程序運行前的初始化過程當中，與詞法做用域的變量解析規則相配合，將這些靜態解析後的變量帶入運行時的環境，因此它是程序運行時的關鍵內部組件或者說容器，而 JavaScript 將對執行上下文的引用提供給程序開發者的惟一入口就是 this，它得以訪問被編譯後帶入到某個執行上下文運行環境中的變量。this 指代的其實只是內部抽象的執行上下文向用戶所開放的那一部分，其實體是一個對象，綁定了許多編譯後的變量。程序員

如下是一段關於執行上下文精闢的總結：github

An execution context is purely a specification mechanism and need not correspond to any particular artefact of an ECMAScript implementation. It is impossible for ECMAScript code to directly access or observe an execution context.web

翻譯：執行上下文純粹是一種規範機制，它不須要與基於 ECMAScript 規範的任何特定擴展實現對應。ECMAScript 代碼沒法直接訪問或觀察執行上下文。編程

關於This對象：What's This

我將官方文檔和一些別的文章裏的說明稍加梳理，能夠從如下段落中較爲清晰地看出 this 的本質：app

First, know that all functions in JavaScript have properties, just as objects have properties. And when a function executes, it gets the this property—a variable with the value of the object that invokes the function where this is used.編程語言

The this keyword evaluates to the value of the ThisBinding of the current execution context.

The abstract operation GetThisEnvironment finds the Environment Record that currently supplies the binding of the keyword this

this is not assigned a value until an object invokes the function where this is defined.

翻譯：

首先，要知道 JavaScript 中全部的函數與對象同樣都擁有屬性。當一個函數執行時，它獲得 this 屬性——一個指向調用函數的對象的變量。
this 關鍵字計算爲當前執行上下文的 ThisBinding 屬性的值。
GetThisEnvironment 抽象運算查找當前提供 this 關鍵字的綁定的環境記錄。
在對象調用了定義了 this 的函數以前，this 不會被賦值。

由此可得出關於 this 的徹底定義：this 是在程序運行時，經過語言內部抽象操做在執行上下文中動態計算獲得的，指向調用使用了其的函數的對象的變量。

執行上下文 vs. This關鍵字：Execution Context vs. This Keyword

執行上下文和 this 關鍵字的關係與潛意識相對於意識的關係相似，執行上下文是冰山下深邃龐大而不可窺探的祕地，而 this 只將其一個小部分顯露出來。因爲 JavaScript 是面向對象的編程語言，因此執行上下文其實質至關於一個對象，this 指向了它向開發者開放了的一系列屬性集合的對象，於是我把 this 叫作執行上下文的引用對象。

This因何而來：Why This

JavaScript 在編寫初始借鑑了JAVA 和 C 語言的特性，即使本質上不一樣，但仍是把這個如同慣例般存在的 this 拿了過來。使用 this 的緣由其實很簡單：

首先，咱們時常沒法得知調用了函數的對象的名稱，而且有時候根本就沒有名稱能夠用來引用調用對象。這是一個迫切的緣由，由於咱們在開發時一定會遇到須要引用調用函數的對象的場景。

其次，避免重複指代，就像咱們常用第三人稱來指代前文的主體同樣，做爲程序員你們固然很樂意使用一個快捷方式來避免機械重複一些沒必要要的代碼，這也是「語言」這一重要產品的特性。

最後，它提供給咱們實現高級功能的可能性，咱們能夠經過 this 動態對於執行上下文的指代而實現程序的複用性和擴展。

This的判斷規則：Rules of This

對 this 的根源進行深刻探究的目的就是爲了在開發中對本身所使用的 this 關鍵字指代的對象進行準確的斷定，它就是一個變量，因此當咱們使用它的時候，必須清晰地知道它的值究竟是什麼。

通常來講，咱們能夠經過肯定是哪一個對象擁有所調用的函數來肯定其 this 的指向。這是因爲 this 的綁定值是在函數調用的時候才賦予的，要看函數在哪一個上下文對象中調用，但有時候這不是僅用肉眼就能觀察出來的。

此外還要嚴肅聲明一下，雖然在以前下定義的時候將 this 的概念明確地劃分到了運行階段，但因爲它做爲一個變量的特性，是能夠改變引用值的，它的值的計算與詞法規則仍是息息相關，得將編譯和運行時兩個階段結合起來，總結出關於判斷 this 綁定值的基本原則。

this 關鍵字綁定的操做是在語言內核機制的運行時裏執行的，因爲沒法去探索其內部，只能經過官方文檔中給出的一系列描述程序來得知其如何判斷，能夠梳理出函數調用的內部過程當中對 this 的綁定計算的依據：

前置知識 1: 內部機制建立執行上下文、初始化函數所屬領域和建立相關環境記錄

在函數被真正執行以前，內部機制會執行建立擁有函數的領域、建立執行上下文、移交當前執行上下文控制權、建立環境記錄、環境記錄對象參數的綁定等一系列操做，爲程序運行作編譯準備。在將函數推入執行棧頂層的時候，對其上下文的歸屬有如下的判斷過程，此處與一個新的概念領域有關：

若是領域中的屬性 this 返回了一個對象，就將內部屬性 thisValue 設置爲以此對象爲基礎按照規格建立的 js 對象，不然 thisValue 綁定值爲 undefined，代表領域的全局對象（本地全局對象）將設置爲全局對象（程序全局對象）。

這裏在新規範裏出現的一個概念領域取代了以前版本中簡單的做用域的概念，因爲實現了模塊化等其餘新特性，因此做用域的概念能夠至關於擴展成了如今的領域，它下屬了其餘幾個環境記錄，其中變量的綁定分別在不一樣環境記錄中，這裏就不作深刻解釋了。

領域中比較重要的屬性是領域中的全局對象，這與程序運行時的全局對象的概念要加以區別，因此能夠把領域中的全局對象看做是本地全局變量，其實也就是函數所屬的上下文對象，它的值就是在剛纔的以上的判斷中肯定的，若是沒有這個前置對象，就會把全局對象設置爲本地全局對象的值。

前置知識 2: 內部機制建立函數

內部機制在詞法分析階段會經過函數的定義方式向建立函數操做傳入幾種不一樣類型的函數類型：Normal、Arrow、Method，相對應的是普通函數、箭頭函數、做爲對象方法的函數。同時在這一步還傳入指定代碼嚴格模式的參數 strict。而後進行函數的初始化的。

方式 1: 內部機制初始化普通函數

內部機制在這一步會設置函數的一個重要屬性 ThisMode 的值，它是決定 this 綁定值的依據，它的值是根據上一步傳入的參數來判斷的，依次執行一下三條判斷分支：

函數類型爲 Arrow：將 ThisMode 賦值爲 lexical ，這個值在計算 this 綁定時將按照詞法做用域的規則來賦值，也就是說 this 的值與定義函數的詞法做用域中的 this 相一致。
代碼模式爲 strict ：將 ThisMode 賦值 strict，按照這個值計算 this 綁定時只會將顯式傳入的上下文對象綁定給 this。
非以上兩種條件：將 ThisMode 賦值 global，被設置爲 global 以後，函數在運行階段被調用時，this 的值就會指向全局對象。

方式 2: 內部機制建立對象方法函數

做爲對象屬性的方法是另外來計算 this 的，只有在做爲對象方法被調用的函數，在內部建立函數時纔會傳入 Method 值。毫無疑問它將 this 指向了這個前置的對象。構造函數也是同理。

總結一下對通常使用到的函數的判斷規則以下：

箭頭函數：不管調用位置，取它詞法定義處的外層上下文中綁定的 this，沒有中間本地對象存在時老是可以取到全局對象。
嚴格模式：不管調用位置，只取顯式給定的上下文綁定的 this，經過 call()、apply()、bind() 方法傳入的第一參數，不然是 undefined。
new 關鍵字調用的構造器函數：不管調用位置，this 必爲在內部建立的新的實例對象
顯式綁定上下文對象的普通函數：不管調用位置，this 必爲傳入的上下文對象
方法函數：屬於隱式綁定，不管詞法定義位置，實際狀況視調用處而定：
- 直接調用時：this 爲前置上下文對象
- 做爲被引用值時：this 爲調用時的上下文對象，在其餘對象中引用 this 就是這個調用它的對象；被全局變量引用，this 就是全局對象。
普通函數：不管詞法定義位置，視調用處而定，其實質在內存都都是被做爲引用值調用的，因此 this 都指向全局對象，嚴格模式規則優先。