通過javascript 執行環境理解她

古往今來最難的學的武功(javascript)算其一。

欲練此功必先自宮，願少俠習的此功，笑傲江湖。

你將了解

• 執行棧（Execution stack）


• 執行上下文（Execution Context）


• 作用域鏈（scope chains）


• 變量提升（hoisting）


• 閉包（closures）


• this 綁定

執行棧

又叫調用棧，具有 LIFO（last in first out 後進先出）結構，用於存儲在代碼執行期間創建的所有執行上下文。

當 JavaScript 引擎首次讀取你的腳本時，它會創建一個全局執行上下文並將其推入當前的執行棧。每當發生一個函數調用，引擎都會為該函數創建一個新的執行上下文並將其推到當前執行棧的頂端。
引擎會運行執行上下文在執行棧頂端的函數，當此函數運行完成后，其對應的執行上下文將會從執行棧中彈出，上下文控制權將移到當前執行棧的下一個執行上下文。

我們通過下面的示例來說明一下

function one() {
   console.log('one')
   two()
 }
 function two() {
   console.log('two')
 }
 one()

當程序（代碼）開始執行時 javscript 引擎創建 GobalExecutionContext （全局執行上下文）推入當前的執行棧，此時 GobalExecutionContext 處於棧頂會立刻執行全局執行上下文 然後遇到 one() 引擎都會為該函數創建一個新的執行上下文 oneFunctionExecutionContext 並將其推到當前執行棧的頂端並執行，然後遇到two() twoFunctionExecutionContext 入棧並執行至出棧，回到 oneFunctionExecutionContext 繼續執行至出棧 ,最後剩餘一個 GobalExecutionContext 它會在程序關閉的時候出棧。

然後調用棧如下圖：

如果是這樣的代碼

function foo() {
   foo()
 }
 foo()

如下

當一個遞歸沒有結束點的時候就會出現棧溢出

什麼是執行上下文

了解 JavaScript 的執行上下文，有助於你理解更高級的內容比如變量提升、作用域鏈和閉包。既然如此，那到底什麼是"執行上下文"呢？

執行上下文是當前 JavaScript 代碼被解析和執行時所在環境的抽象概念。

Javascript 中代碼的執行上下文分為以下三種：

1. 全局執行上下文（Global Execution Context）- 這個是默認的代碼運行環境，一旦代碼被載入，引擎最先進入的就是這個環境。


2. 函數執行上下文（Function Execution Context） - 當執行一個函數時，運行函數體中的代碼。


3. Eval - 在 Eval 函數內運行的代碼。

javascript 是一個單線程語言，這意味着在瀏覽器中同時只能做一件事情。當 javascript 解釋器初始執行代碼，它首先默認進入全局上下文。每次調用一個函數將會創建一個新的執行上下文。

javascript執行棧中不同執行上下文之間的詞法環境有一種關聯關係，從棧頂到棧底（從局部直到全局）,這種關係被叫做作用域鏈。

簡單的說，每次你試圖訪問函數執行上下文中的變量時，進程總是從自己上下文環境中開始查找。如果在自己的上下文中沒發現要查找的變量，繼續搜索下一層上下文。它將檢查執行棧中每一個執行上下文環境，尋找和變量名稱匹配的值，直到找到為止，如果到全局都沒有則拋出錯誤。

執行上下文的創建過程

我們現在已經知道，每當調用一個函數時，一個新的執行上下文就會被創建出來。然而，在 javascript 引擎內部，這個上下文的創建過程具體分為兩個階段:

創建階段 > 執行階段

創建階段

執行上下文在創建階段創建。在創建階段發生以下事情：

1. LexicalEnvironment 組件已創建。


2. VariableEnvironment 組件已創建。

因此，執行上下文可以在概念上表示如下：

ExecutionContext = {
   LexicalEnvironment = <詞法環境>，
   VariableEnvironment = <變量環境>，
 }

詞法環境（Lexical Environment）

文檔將詞法環境定義為：

詞法環境是一種規範類型，基於 ECMAScript 代碼的詞法嵌套結構來定義標識符與特定變量和函數的關聯關係。詞法環境由環境記錄（environment record）和可能為空引用（null）的外部詞法環境組成。

簡而言之，詞法環境是一個包含標識符變量映射的結構。（這裏的標識符表示變量/函數的名稱，變量是對實際對象【包括函數類型對象】或原始值的引用）

詞法環境有兩種類型

• 全局環境（在全局執行上下文中）是一個沒有外部環境的詞法環境。全局環境的外部環境引用為 null。它擁有一個全局對象（window 對象）及其關聯的方法和屬性（例如數組方法）以及任何用戶自定義的全局變量，this 的值指向這個全局對象。


• 函數環境，用戶在函數中定義的變量被存儲在環境記錄中。對外部環境的引用可以是全局環境，也可以是包含內部函數的外部函數環境。

每個詞彙環境都有三個組成部分：

1）環境記錄（environment record）

2）對外部環境的引用(outer)

3） 綁定 this

環境記錄 同樣有兩種類型（如下所示）：

• 聲明性環境記錄 存儲變量、函數和參數。一個函數環境包含聲明性環境記錄。


• 對象環境記錄 用於定義在全局執行上下文中出現的變量和函數的關聯。全局環境包含對象環境記錄

抽象地說，詞法環境在偽代碼中看起來像這樣：

詞法環境和環境記錄值是純粹的規範機制，ECMAScript 程序不能直接訪問或操縱這些值。

GlobalExectionContext = {
   // 詞法環境
   LexicalEnvironment:{
     // 功能環境記錄
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
      }
     outer:<null>,
     this:<global object>
   }
 }
 FunctionExectionContext = {
   LexicalEnvironment:{
     EnvironmentRecord:{
       Type:"Declarative",
       // Identifier bindings go here
      }
     outer:<Global or outer function environment reference>,
     this:<取決於函數的調用方式>
   }
 }

變量環境:

它也是一個詞法環境，其 EnvironmentRecord 包含了由 VariableStatements 在此執行上下文創建的綁定。
如上所述，變量環境也是一個詞法環境，因此它具有上面定義的詞法環境的所有屬性。
在 ES6 中，LexicalEnvironment 組件和 VariableEnvironment 組件的區別在於前者用於存儲函數聲明和變量（ let 和 const ）綁定，而後者僅用於存儲變量（ var ）綁定。
讓我們結合一些代碼示例來理解上述概念：

let a = 20
 const b = 30
 var c
 
 function multiply(e, f) {
   var g = 20
   return e * f * g
 }
 
 c = multiply(20, 30)

執行上下文如下所示：

GlobalExectionContext = {
   LexicalEnvironment:{
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
       a:<uninitialized>,
       b:<uninitialized>,
       multiply:<func>
     },
     outer:<null>,
     ThisBinding:<Global Object>
   },
   VariableEnvironment:{
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
       c:undefined,
     }
     outer:<null>,
     ThisBinding:<Global Object>
   }
 }
 

在執行階段，完成變量賦值。因此，在執行階段，全局執行上下文將看起來像這樣。

// 執行
 GlobalExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Object",
       // Identifier bindings go here
       a: 20,
       b: 30,
       multiply: < func >
     }
     outer: <null>,
     ThisBinding: <Global Object>
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Object",
       // Identifier bindings go here
       c: undefined,
     }
     outer: <null>,
     ThisBinding: <Global Object>
   }
 }

當 multiply(20, 30)遇到函數調用時，會創建一個新的函數執行上下文來執行函數代碼。因此，在創建階段，函數執行上下文將如下所示：

// multiply 創建
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: {0: 20, 1: 30, length: 2},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       g: undefined
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

在此之後，執行上下文將執行執行階段，這意味着完成了對函數內部變量的賦值。因此，在執行階段，函數執行上下文將如下所示：

// multiply 執行
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: {0: 20, 1: 30, length: 2},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       g: 20
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

函數完成后，返回的值賦值給c。因此，全局詞法環境得到了更新。之後，全局代碼完成，程序結束。

注： 在執行階段，如果 Javascript 引擎在源代碼中聲明的實際位置找不到 let 變量的值，那麼將為其分配 undefined 值。

變量提升

在網上一直看到這樣的總結： 在函數中聲明的變量以及函數，其作用域提升到函數頂部，換句話說，就是一進入函數體，就可以訪問到其中聲明的變量以及函數。這是對的，但是知道其中的緣由嗎？相信你通過上述的解釋應該也有所明白了。不過在這邊再分析一下。

你可能已經注意到了在創建階段 let 和 const 定義的變量沒有任何與之關聯的值，但 var 定義的變量設置為 undefined。
這是因為在創建階段，代碼會被掃描並解析變量和函數聲明，其中函數聲明存儲在環境中，而變量會被設置為 undefined（在 var 聲明變量的情況下）或保持未初始化（在 let 和const 聲明變量的情況下）。
這就是為什麼你可以在聲明之前訪問var 定義的變量（儘管是 undefined ），但如果在聲明之前訪問let 和const 定義的變量就會提示引用錯誤的原因。
這就是我們所謂的變量提升。

思考題：

console.log('step1:',a)
 var a = 'artiely'
 console.log('step2:',a)
 function bar (a){
   console.log('step3:',a)
   a = 'TJ'
   console.log('step4:',a)
   function a(){
   }
 }
 bar(a)
 console.log('step5:',a)

對外部環境的引用

上面代碼如果我們改用調用方式如下：

let a = 20
 const b = 30
 var c
 
 function multiply() {
   var g = 20
   return a * b * g
 }
 
 c = multiply()

其實你會發現結果是一樣的
但是 multiply 的執行上下文卻發生一些變化

// 創建
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: { length: 0},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       // Identifier bindings go here
       g: undefined
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }
 

// 執行
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: { length: 0},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       // Identifier bindings go here
       g: 20
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

multiply() 執行的時候會直接在 outer: <GlobalLexicalEnvironment>,中查找a,b

對外部環境的引用意味着它可以訪問其外部詞法環境。這意味着如果在當前詞法環境中找不到它們，JavaScript 引擎可以在外部環境中查找變量。這就是之前說的 作用域鏈

閉包

MDN 解釋 閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量

這是我認為對閉包最合理的解釋了，就看你怎麼理解閉包的機制了。
其實閉包與作用域鏈有着密切的關係。

首先我們來看看什麼樣的代碼會產生閉包。

function foo() {
   var name = 'artiely'
   function bar() {
     console.log(`hello `)
   }
   bar()
 }
 foo()

以上代碼是有閉包嗎？沒有~

function foo() {
   var name = 'artiely'
   function bar() {
     console.log(`hello ${name}`)
   }
   bar()
 }
 foo()

我們只做了微小的調整，現在就有閉包了,我們只是在bar中加入了name得引用
上面的代碼還可以寫成這樣

// 或者
 function foo() {
   var name = 'artiely'
   return function bar() {
     console.log(`hello ${name}`)
   }
 }
 foo()()

對於閉包的形成我進行了如下的幾點歸納

1. A 函數內必須有 B 函數的聲明；


2. B 函數必須引用 A 函數的變量；


3. B 函數被調用（當然前提是 A 函數被調用）

以上 3 點缺一不可

我們來分析一下上面代碼的執行上下文

// 創建
 fooFunctionExectionContext = {
 LexicalEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     Arguments: { length: 0},
     bar: < func >,
   },
   outer: <GlobalLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>,
 },
 VariableEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     name: undefined
   },
   outer: <GlobalLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>
   }
 }
 // 執行 略

// 創建
 barFunctionExectionContext = {
 LexicalEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     Arguments: { length: 0},
   },
   outer: <fooLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>,
 },
 VariableEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
   },
   outer: <fooLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>
   }
 }
 // 執行 略

這裏因為bar的創建存在着對fooLexicalEnvironment里變量的引用，雖然foo可能執行已結束但變量不會被回收。這種機制被叫做閉包

閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量

我們結合上面例子重新分解一下這句話

閉包是由函數bar以及創建該函數foo的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量name

但是從chrome的理解，閉包並沒有包含所能訪問的所有局部變量，僅僅包含所被引用的變量。

this 綁定

在全局執行上下文中，值是 this 指全局對象。（在瀏覽器中，this 指的是 Window 對象）。

在函數執行上下文中，值 this 取決於函數的調用方式。如果它由對象引用調用，則將值 this 設置為該對象，否則，將值 this 設置為全局對象或 undefined（在嚴格模式下）。例如：

let person = {
   name: 'peter',
   birthYear: 1994,
   calcAge: function() {
     console.log(2018 - this.birthYear)
   }
 }
 
 person.calcAge()
 // 'this' 指向 'person', 因為 'calcAge' 是被 'person' 對象引用調用的。
 
 let calculateAge = person.calcAge
 calculateAge()
 // 'this' 指向全局 window 對象,因為沒有給出任何對象引用

注意所有的()()自調用的函數 this 都是指向Global Object的既瀏覽器中的window

最後

如果本文對你有幫助或覺得不錯請幫忙點贊，如有疑問請留言。

其他參考：

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

※試算大陸海運運費!

---

Orignal From: 通過javascript 執行環境理解她