JavaScript執行上下文詳解-js教程-PHP中文網

JavaScript執行上下文詳解

WBOY

發布： 2024-08-29 10:35:32

原創

574 人瀏覽過

JavaScript執行上下文是一個重要的概念，它定義了程式執行過程中程式碼如何解釋和執行。每個函數呼叫或程式碼區塊的執行都會建立一個執行上下文，它控製程式碼執行時所有變數、物件和函數的範圍。

什麼是執行上下文？

執行上下文是 JavaScript 程式碼執行過程中所建立的環境。它就像一個容器，儲存特定函數變數、物件和函數的資料。基本上，執行上下文告訴 JavaScript 引擎在哪裡可以找到變數和函數以及如何執行它們。

執行上下文的類型

執行上下文主要可以分為三種：

全域執行上下文（GEC）：第一次執行腳本時，會建立一個全域執行上下文。 它只建立一次並包含全域物件（例如瀏覽器中的視窗）和此綁定。直到整個腳本執行完畢，GEC 才會結束。
函數執行上下文（FEC）：每次呼叫函數時，都會建立一個新的執行上下文。每個函數都有自己的執行上下文，它有自己的作用域、變數和 this 綁定。
Eval 執行上下文：呼叫 eval() 函數時會建立一個新的執行上下文。但是，通常不鼓勵使用 eval()，因為它可能會導致程式碼可讀性和安全性問題。

執行上下文的組成部分：

執行上下文一般由三個主要部分組成：

變數物件（VO）/詞法環境：儲存所有變數、函數宣告和函數參數。

console.log(a); // Output: undefined
var a = 5;

function myFunction() {
    console.log(b); // Output: undefined
    var b = 10;
}
myFunction();

登入後複製

作用域鏈：作用域鍊是一條鏈，使所有變數和函數可以從目前執行上下文存取到其先前的上下文。它決定了哪些變數可以在哪裡找到。

var globalVar = "I'm Global";

function outerFunction() {
    var outerVar = "I'm in outer function";

    function innerFunction() {
        var innerVar = "I'm in inner function";
        console.log(globalVar); // "I'm Global"
        console.log(outerVar);  // "I'm in outer function"
    }

    innerFunction();
}

outerFunction();

登入後複製

this 關鍵字綁定：這是一個特殊關鍵字，根據執行上下文而變化。在全域執行上下文中，this 指的是全域對象，在函數執行上下文中，它取決於函數的呼叫方式。

console.log(this); // Global context, refers to `window` in browsers.

var myObject = {
    name: "JavaScript",
    sayName: function() {
        console.log(this.name); // `this` refers to `myObject`.
    }
};

myObject.sayName(); // Output: "JavaScript"

function MyConstructor() {
    this.prop = "Property";
}

var obj = new MyConstructor();
console.log(obj.prop); // Output: "Property"

登入後複製