腳本之家服務器常用軟件

快捷導航

JavaScript 中的執(zhí)行上下文和執(zhí)行棧實例講解

更新時間：2021年02月25日 16:57:52 作者：沖冠為紅顏

這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧實例講解,文中實例講解的很清晰，有感興趣的同學可以研究下

JavaScript - 原理系列

在日常開發(fā)中，每當我們接手一個現(xiàn)有項目后，我們總喜歡先去看看別人寫的代碼。每當我們看到別人寫出很酷的代碼的時候，我們總會感慨！寫出這么優(yōu)美而又簡潔的代碼的兄弟到底是怎么養(yǎng)成的呢？

我要怎樣才能達到和大佬一樣的水平呢！好了，廢話不多說，讓我們切入今天的主題。

一、執(zhí)行上下文

簡而言之，【執(zhí)行上下文】就是JavaScript 代碼被解析和執(zhí)行時所在環(huán)境的抽象概念，在JavaScript 中運行任何的代碼都是在它的執(zhí)行上下文中運行。

在運行JavaScript代碼時，每當需要執(zhí)行代碼時，執(zhí)行代碼會先進入一個環(huán)境（瀏覽器、Node客戶端），這時就會為該環(huán)境創(chuàng)建一個執(zhí)行上下文，它會在你運行代碼前做一些準備工作，如確定作用域，創(chuàng)建全局、局部變量對象等。

執(zhí)行上下文的分類

全局執(zhí)行上下文：

這是默認的、最基礎的執(zhí)行上下文。不在任何函數(shù)中的代碼都位于全局執(zhí)行上下文中。

它做了兩件事：

創(chuàng)建一個全局對象，在瀏覽器中這個全局對象就是 window 對象。

將 this 指針指向這個全局對象。一個程序中只能存在一個全局執(zhí)行上下文。

函數(shù)執(zhí)行上下文：

每次調用函數(shù)時，都會為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文。每個函數(shù)都擁有自己的執(zhí)行上下文，但是只有在函數(shù)被調用的時候才會被創(chuàng)建。一個程序中可以存在任意數(shù)量的函數(shù)執(zhí)行上下文。每當一個新的執(zhí)行上下文被創(chuàng)建，它都會按照特定的順序執(zhí)行一系列步驟，具體過程將在本文后面討論。

Eval 函數(shù)執(zhí)行上下文：

運行在 eval 函數(shù)中的代碼也獲得了自己的執(zhí)行上下文，但由于 Javascript 開發(fā)人員不常用 eval 函數(shù)，所以在這里不再討論。

執(zhí)行上下文的數(shù)量限制（堆棧溢出）

執(zhí)行上下文可存在多個，雖然沒有明確的數(shù)量限制，但如果超出棧分配的空間，會造成堆棧溢出。常見于遞歸調用，沒有終止條件造成死循環(huán)的場景。

下面是示例代碼：

// 遞歸調用自身
function foo() {
  foo();
}
foo();
// 報錯：Uncaught RangeError: Maximum call stack size exceeded

Tips：

JS是“單線程”的，每次只執(zhí)行一段代碼

二、執(zhí)行棧

JS中的執(zhí)行棧，也就是在其它編程語言中所說的“調用棧”，是一種擁有 LIFO（后進先出）數(shù)據(jù)結構的棧，被用來存儲代碼運行時創(chuàng)建的所有執(zhí)行上下文。

當 JavaScript 引擎第一次遇到你的腳本時，它會創(chuàng)建一個全局的執(zhí)行上下文并且壓入當前執(zhí)行棧。每當引擎遇到一個函數(shù)調用，它會為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文并壓入棧的頂部。

引擎會執(zhí)行那些執(zhí)行上下文位于棧頂?shù)暮瘮?shù)。當該函數(shù)執(zhí)行結束時，執(zhí)行上下文從棧中彈出，控制流程到達當前棧中的下一個上下文。

棧數(shù)據(jù)結構

現(xiàn)在讓我們用一段代碼來理解執(zhí)行棧

let a = 'Hello World!';

function first() {
 console.log('Inside first function');
 second();
 console.log('Again inside first function');
}

function second() {
 console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

下圖是上面代碼的執(zhí)行棧

當上述代碼在瀏覽器加載時，瀏覽器的JavaScript 引擎會創(chuàng)建一個全局執(zhí)行上下文并把它壓入當前執(zhí)行棧。當遇到函數(shù)調用時，JavaScript 引擎為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文并把它壓入當前執(zhí)行棧的頂部。

當從 first()函數(shù)內部調用 second()函數(shù)時，JavaScript 引擎為 second() 函數(shù)創(chuàng)建了一個新的執(zhí)行上下文并把它壓入當前執(zhí)行棧的頂部。當 second()函數(shù)執(zhí)行完畢，它的執(zhí)行上下文會從當前棧彈出，并且控制流程到達下一個執(zhí)行上下文，即 first() 函數(shù)的執(zhí)行上下文。

當 first() 執(zhí)行完畢，它的執(zhí)行上下文從棧彈出，控制流程到達全局執(zhí)行上下文。一旦所有代碼執(zhí)行完畢，JavaScript 引擎從當前棧中移除全局執(zhí)行上下文。

The Creation Phase

在 JavaScript 代碼執(zhí)行前，執(zhí)行上下文將經歷創(chuàng)建階段。在創(chuàng)建階段會發(fā)生三件事：

this 值的決定，即我們所熟知的 This 綁定。
創(chuàng)建詞法環(huán)境組件。
創(chuàng)建變量環(huán)境組件。

所以執(zhí)行上下文在概念上表示如下：

ExecutionContext = {
 ThisBinding = <this value>,
 LexicalEnvironment = { ... },
 VariableEnvironment = { ... },
}

This 綁定：

在全局執(zhí)行上下文中，this 的值指向全局對象。(在瀏覽器中，this引用 Window 對象)。

在函數(shù)執(zhí)行上下文中，this 的值取決于該函數(shù)是如何被調用的。如果它被一個引用對象調用，那么 this 會被設置成那個對象，否則 this 的值被設置為全局對象或者undefined（在嚴格模式下）。例如：

let foo = {
 baz: function() {
 console.log(this);
 }
}
foo.baz();  // 'this' 引用 'foo', 因為 'baz' 被
       // 對象 'foo' 調用
let bar = foo.baz;
bar();    // 'this' 指向全局 window 對象，因為
       // 沒有指定引用對象

詞法環(huán)境

官方的 ES6 文檔把詞法環(huán)境定義為

詞法環(huán)境是一種規(guī)范類型，基于 ECMAScript 代碼的詞法嵌套結構來定義標識符和具體變量和函數(shù)的關聯(lián)。一個詞法環(huán)境由環(huán)境記錄器和一個可能的引用外部詞法環(huán)境的空值組成。

簡單來說詞法環(huán)境是一種持有標識符—變量映射的結構。（這里的標識符指的是變量/函數(shù)的名字，而變量是對實際對象[包含函數(shù)類型對象]或原始數(shù)據(jù)的引用）。

現(xiàn)在，在詞法環(huán)境的內部有兩個組件：(1) 環(huán)境記錄器和 (2) 一個外部環(huán)境的引用。

環(huán)境記錄器是存儲變量和函數(shù)聲明的實際位置。
外部環(huán)境的引用意味著它可以訪問其父級詞法環(huán)境（作用域）。

詞法環(huán)境有兩種類型：

全局環(huán)境（在全局執(zhí)行上下文中）是沒有外部環(huán)境引用的詞法環(huán)境。全局環(huán)境的外部環(huán)境引用是 null。它擁有內建的 Object/Array/等、在環(huán)境記錄器內的原型函數(shù)（關聯(lián)全局對象，比如 window 對象）還有任何用戶定義的全局變量，并且 this的值指向全局對象。
在函數(shù)環(huán)境中，函數(shù)內部用戶定義的變量存儲在環(huán)境記錄器中。并且引用的外部環(huán)境可能是全局環(huán)境，或者任何包含此內部函數(shù)的外部函數(shù)。

環(huán)境記錄器也有兩種類型（如上！）：

聲明式環(huán)境記錄器存儲變量、函數(shù)和參數(shù)。
對象環(huán)境記錄器用來定義出現(xiàn)在全局上下文中的變量和函數(shù)的關系。

簡而言之

在全局環(huán)境中，環(huán)境記錄器是對象環(huán)境記錄器。
在函數(shù)環(huán)境中，環(huán)境記錄器是聲明式環(huán)境記錄器。

注意

對于函數(shù)環(huán)境，聲明式環(huán)境記錄器還包含了一個傳遞給函數(shù)的 arguments 對象（此對象存儲索引和參數(shù)的映射）和傳遞給函數(shù)的參數(shù)的 length。

抽象地講，詞法環(huán)境在偽代碼中看起來像這樣：

GlobalExectionContext = {
 LexicalEnvironment: {
  EnvironmentRecord: {
   Type: "Object",
   // 在這里綁定標識符
  }
  outer: <null>
 }
}

FunctionExectionContext = {
 LexicalEnvironment: {
  EnvironmentRecord: {
   Type: "Declarative",
   // 在這里綁定標識符
  }
  outer: <Global or outer function environment reference>
 }
}

變量環(huán)境：

它同樣是一個詞法環(huán)境，其環(huán)境記錄器持有變量聲明語句在執(zhí)行上下文中創(chuàng)建的綁定關系。

如上所述，變量環(huán)境也是一個詞法環(huán)境，所以它有著上面定義的詞法環(huán)境的所有屬性。

在 ES6 中，詞法環(huán)境組件和變量環(huán)境的一個不同就是前者被用來存儲函數(shù)聲明和變量（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);

執(zhí)行上下文看起來像這樣：

GlobalExectionContext = {

 ThisBinding: <Global Object>,

 LexicalEnvironment: {
  EnvironmentRecord: {
   Type: "Object",
   // 在這里綁定標識符
   a: < uninitialized >,
   b: < uninitialized >,
   multiply: < func >
  }
  outer: <null>
 },

 VariableEnvironment: {
  EnvironmentRecord: {
   Type: "Object",
   // 在這里綁定標識符
   c: undefined,
  }
  outer: <null>
 }
}

FunctionExectionContext = {
 ThisBinding: <Global Object>,

 LexicalEnvironment: {
  EnvironmentRecord: {
   Type: "Declarative",
   // 在這里綁定標識符
   Arguments: {0: 20, 1: 30, length: 2},
  },
  outer: <GlobalLexicalEnvironment>
 },

VariableEnvironment: {
  EnvironmentRecord: {
   Type: "Declarative",
   // 在這里綁定標識符
   g: undefined
  },
  outer: <GlobalLexicalEnvironment>
 }
}

注意

只有遇到調用函數(shù) multiply 時，函數(shù)執(zhí)行上下文才會被創(chuàng)建。

可能你已經注意到 let 和 const 定義的變量并沒有關聯(lián)任何值，但 var 定義的變量被設成了 undefined。

這是因為在創(chuàng)建階段時，引擎檢查代碼找出變量和函數(shù)聲明，雖然函數(shù)聲明完全存儲在環(huán)境中，但是變量最初設置為 undefined（var 情況下），或者未初始化（let 和const 情況下）。

這就是為什么你可以在聲明之前訪問 var 定義的變量（雖然是 undefined），但是在聲明之前訪問 let 和 const 的變量會得到一個引用錯誤。

這就是我們說的變量聲明提升。

執(zhí)行階段

這是整篇文章中最簡單的部分。在此階段，完成對所有這些變量的分配，最后執(zhí)行代碼。

注意

在執(zhí)行階段，如果 JavaScript 引擎不能在源碼中聲明的實際位置找到 let 變量的值，它會被賦值為 undefined。