JavaScript执行上下文详解-js教程-PHP中文网

JavaScript执行上下文详解

WBOY

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

原创

594 人浏览过

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"

登录后复制