經過javascript 執行環境理解她

時間 2019-11-20

標籤經過 javascript 執行環境理解欄目 JavaScript 简体版

原文原文鏈接

從古到今最難的學的武功(javascript)算其一。javascript

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

你將瞭解

執行棧（Execution stack）
執行上下文（Execution Context）
做用域鏈（scope chains）
變量提高（hoisting）
閉包（closures）
this 綁定

執行棧

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

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

咱們經過下面的示例來講明一下瀏覽器

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

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

而後調用棧以下圖：
ide

若是是這樣的代碼函數

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

以下

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

什麼是執行上下文

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

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

Javascript 中代碼的執行上下文分爲如下三種：

全局執行上下文（Global Execution Context）- 這個是默認的代碼運行環境，一旦代碼被載入，引擎最早進入的就是這個環境。
函數執行上下文（Function Execution Context） - 當執行一個函數時，運行函數體中的代碼。
Eval - 在 Eval 函數內運行的代碼。

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

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

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

執行上下文的建立過程

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

建立階段 > 執行階段

建立階段

執行上下文在建立階段建立。在建立階段發生如下事情：

LexicalEnvironment 組件已建立。
VariableEnvironment 組件已建立。

所以，執行上下文能夠在概念上表示以下：

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

詞法環境（Lexical Environment）

官方 ES6 文檔將詞法環境定義爲：

詞法環境是一種規範類型，基於 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()()

對於閉包的造成我進行了以下的幾點概括

A 函數內必須有 B 函數的聲明；
B 函數必須引用 A 函數的變量；
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