執行上下文（Execution Context）的詳解

一、什麼是執行上下文

在JavaScript中，執行上下文指的是代碼在執行時所處的環境。每當JavaScript代碼被執行時，都會創建一個執行上下文。執行上下文包含了JavaScript代碼執行所需的所有信息，如變數名、函數聲明、參數等。一個執行上下文可以看作是一個對象，這個對象中的屬性和方法都是當前代碼執行時所需的。

二、執行上下文的類型

在JavaScript中，存在三種不同類型的執行上下文：

全局執行上下文：該類型的執行上下文是在頁面載入時創建的，JavaScript代碼的最頂層，默認的全局執行上下文是window對象。
函數執行上下文：每當執行一個函數時，都會創建一個函數執行上下文。函數執行上下文是在函數執行時創建的，並會在函數執行結束時銷毀。
Eval函數執行上下文：執行一個eval()函數時，都會創建一個Eval函數執行上下文。

三、執行上下文的生命周期

執行上下文的生命周期可以分為兩個階段：創建階段和執行階段。

1. 創建階段

當JavaScript代碼開始執行時，會先進入執行上下文的創建階段，這個階段會做以下操作：

創建變數對象（Variable Object）：為當前執行上下文創建一個變數對象，該變數對象中包含了當前執行上下文所需要的所有信息。
創建作用域鏈（Scope Chain）：將當前執行上下文的作用域鏈連接到變數對象上。
確定this的指向：在創建階段，會確定this關鍵字的指向，this的指向是在函數被調用時確定的，全局執行上下文中this指向window對象。

2. 執行階段

在創建階段結束後，進入執行階段，在該階段中，JavaScript會一行一行執行代碼。

四、變數對象

每個執行上下文都會有一個變數對象，在創建階段被創建出來，作用是存儲函數中定義的變數、函數聲明、形參等信息。變數對象的類型分為三種：函數執行上下文中的變數對象、全局執行上下文中的變數對象和模塊執行上下文中的變數對象。

1. 函數執行上下文的變數對象

在函數執行上下文中，變數對象分為兩個部分：活動對象（Active Object）和變數聲明部分（Variable Declarations）。其中，變數聲明部分存儲了函數中所有變數聲明語句，活動對象則包含了函數形參、變數聲明和函數聲明。

  
    function foo(a) {
      var b = 2;
      function c() {}
      var d = function() {};
      b = 3;
    }
    foo(1);

上面的代碼在foo函數執行上下文中，變數對象的結構如下所示：

  
    {
      arguments: {
        0: 1,
        length: 1
      },
      b: undefined,
      c: reference to FunctionDeclaration "c",
      d: undefined
    }

可以看到，函數形參被添加到活動對象中，變數聲明語句只是在變數對象中添加了一個名稱和一個undefined的值，函數聲明則是直接將函數添加到變數對象中。

2. 全局執行上下文的變數對象

在全局執行上下文中，變數對象包含了全局對象window中所有屬性、方法和全局函數的定義（如果有的話）。全局執行上下文中的變數對象稱為全局對象。

  
    var a = 1;
    function foo() {}

在全局執行上下文中，變數對象的結構如下所示：

  
    {
      window: reference to global object,
      a: 1,
      foo: reference to FunctionDeclaration "foo"
    }

五、作用域鏈

作用域鏈是一個指向變數對象的指針列表，用於解析變數名。

每當JavaScript代碼執行進入一個新的執行上下文時，JavaScript會將當前執行上下文的變數對象添加到作用域鏈中。當代碼中訪問一個變數時，JavaScript會從當前執行上下文開始搜索作用域鏈，直到找到變數為止。如果整個作用域鏈都沒有找到該變數，JavaScript會報錯。

  
    var a = 1;
    function foo() {
      var b = 2;
      function bar() {
        var c = 3;
        console.log(a + b + c);
      }
      bar();
    }
    foo();

在上面的代碼中，當bar函數要訪問變數a時，會先搜索自身的變數對象，如果沒有找到則繼續向上搜索父級執行上下文的變數對象，直到找到全局執行上下文的變數對象為止。在這個過程中，每個執行上下文的變數對象都會被添加到作用域鏈中，形成一個作用域鏈條。

六、this指向

this指向是JavaScript中一個非常重要的概念。this的值在函數被調用時確定，可以通過函數的調用方式來決定this的指向。

全局執行上下文中，this指向全局對象window。
函數的this指向：在函數執行時，其this指向由函數的調用方式所決定。

函數調用方式決定了函數中this的指向：

作為對象的方法調用：this指向該對象。
作為函數調用：在非嚴格模式下，this指向全局對象window，在嚴格模式下，this指向undefined。
作為構造函數調用：this指向新創建的對象。
使用call或apply綁定this：this指向在call或apply中傳入的對象。

  
    var a = 1;
    var obj = {
      a: 2,
      foo: function() {
        console.log(this.a);
      }
    };
    obj.foo(); // 輸出2
    var bar = obj.foo;
    bar(); // 在非嚴格模式下輸出1，在嚴格模式下輸出undefined

在上面的代碼中，obj.foo()調用時，this指向obj對象，而bar()調用時，this指向全局對象window。

七、總結

執行上下文是JavaScript運行時的基本概念之一，其作用是維護代碼的執行環境。JavaScript中，存在三種不同類型的執行上下文：全局執行上下文、函數執行上下文和eval函數執行上下文。每個執行上下文都包含一個變數對象和一個作用域鏈，變數對象用於存儲執行上下文中創建的所有變數、函數和形參等，作用域鏈用於解析變數名。JavaScript中，this的指向是根據函數的調用方式來決定的，包括作為對象方法、作為函數調用、作為構造函數調用以及使用call和apply綁定this。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/309028.html