你真的清楚JavaScript中执行上下文吗？

执行上下文（Execution Context）是JavaScript中一个非常重要的概念，它是代码执行时的环境信息，包含了变量、函数、作用域等信息。每当JavaScript引擎执行一段可执行代码时，都会创建一个执行上下文，该上下文会被压入执行上下文栈中，当执行完毕后，该上下文将从栈中弹出。

一、执行上下文的阶段

JavaScript程序的执行过程可以分为两个阶段，创建阶段和执行阶段。执行上下文的创建和执行也分别发生在这两个阶段中。

1.创建阶段：在创建阶段，JavaScript引擎会扫描整个代码，将变量声明和函数声明添加到变量对象中。此时，执行上下文的变量对象和作用域链已经创建，但是还未有具体的值。

2.执行阶段：在执行阶段，JavaScript引擎会逐行执行代码，同时根据需要更新变量对象中的值，执行函数调用等操作。在执行函数时，会创建函数执行上下文，并将其压入执行上下文栈中。函数执行完毕后，函数执行上下文会从执行上下文栈中弹出，程序继续执行上一个执行上下文。

可以看出，执行上下文的创建和执行发生在程序的不同阶段，这也反映了JavaScript语言的特性：动态、解释性、基于对象等。在编写JavaScript程序时，需要了解执行上下文的概念和工作原理，以便更好地理解JavaScript的运行机制和调试程序。

创建阶段

执行上下文的创建阶段是JavaScript引擎在执行JavaScript程序之前，对程序进行扫描和处理的阶段。在创建阶段，JavaScript引擎会完成以下几个任务：

1.创建变量对象（Variable Object）：JavaScript引擎会创建当前执行上下文的变量对象，用于存储变量和函数声明。对于全局执行上下文来说，变量对象就是全局对象（例如window对象）；对于函数执行上下文来说，变量对象包括函数参数、内部变量和函数声明等。

2.建立作用域链（Scope Chain）：作用域链是由当前执行上下文的变量对象和其外部环境的变量对象链组成，用于解析变量的位置。JavaScript引擎会在创建阶段建立作用域链，以便在执行阶段使用。

3.确定this指向：在创建阶段，JavaScript引擎会确定当前执行上下文的this指向。对于全局执行上下文来说，this指向全局对象；对于函数执行上下文来说，this指向调用该函数的对象。

需要注意的是，在创建阶段变量对象已经被创建，但变量的值还没有被赋予，因此在创建阶段访问变量时，变量的值为undefined。在执行阶段，当变量的值被赋予后，变量的值就会被更新。

执行阶段

执行上下文的执行阶段是JavaScript引擎在编译阶段之后，对JavaScript程序进行逐行执行的阶段。在执行阶段，JavaScript引擎会完成以下几个任务：

1.变量赋值：在执行阶段，JavaScript引擎会逐行执行代码，并对变量进行赋值。如果变量还没有被声明，JavaScript引擎会抛出ReferenceError异常。

2.函数调用：如果代码中包含函数调用，JavaScript引擎会创建新的函数执行上下文，并将其压入执行上下文栈中。在函数执行完毕后，JavaScript引擎会从执行上下文栈中弹出该函数执行上下文，继续执行上一个执行上下文。

3.闭包：在执行阶段，如果函数内部引用了外部变量，就会形成闭包。JavaScript引擎会将外部变量的值保存在闭包中，以便在函数执行期间访问。

4.垃圾回收：在执行阶段，JavaScript引擎会定期执行垃圾回收，以便清理不再使用的内存。

需要注意的是，执行阶段是一个逐行执行的过程，一旦出现错误，JavaScript引擎就会立即停止执行，并抛出异常。因此，在编写JavaScript程序时，需要注意代码的正确性和可读性，以便更好地调试程序。

二、执行上下文栈

执行上下文栈是JavaScript中管理执行上下文的一种数据结构，它用于跟踪代码的执行，并管理代码执行时所需的上下文环境。执行上下文栈是一个后进先出（LIFO）的数据结构，即最后一个进入的执行上下文会被最先执行和弹出。

当JavaScript程序开始执行时，会创建全局执行上下文，并将其压入执行上下文栈中。随着代码的执行，每当遇到一个函数调用语句，JavaScript引擎就会创建一个新的函数执行上下文，并将其压入执行上下文栈中。当函数执行完毕后，JavaScript引擎会从执行上下文栈中弹出该函数执行上下文，并继续执行上一个执行上下文。

执行上下文栈的顶部始终是当前正在执行的代码所在的执行上下文。当执行上下文栈为空时，JavaScript程序执行结束。

var a = 1;

function foo() {

var b = 2;

function bar() {

var c = 3;

console.log(a, b, c);

}

bar();

}

foo();

当该代码执行时，JavaScript引擎会创建执行上下文栈，并按照以下顺序进行压栈和出栈操作：

1.创建全局执行上下文，并将其压入执行上下文栈中，此时执行上下文栈中只有全局执行上下文。

2.执行到函数foo()，JavaScript引擎会创建函数foo()的执行上下文，并将其压入执行上下文栈中，此时执行上下文栈中的顺序为：foo()执行上下文 -> 全局执行上下文。

3.执行到函数bar()，JavaScript引擎会创建函数bar()的执行上下文，并将其压入执行上下文栈中，此时执行上下文栈中的顺序为：bar()执行上下文 -> foo()执行上下文 -> 全局执行上下文。

4.函数bar()执行完毕，JavaScript引擎会将其执行上下文弹出执行上下文栈，此时执行上下文栈中的顺序为：foo()执行上下文 -> 全局执行上下文。

5.函数foo()执行完毕，JavaScript引擎会将其执行上下文弹出执行上下文栈，此时执行上下文栈中的顺序为：全局执行上下文。

6.程序执行结束，JavaScript引擎结束执行。

通过执行上下文栈的管理，JavaScript引擎可以跟踪代码的执行过程，并及时创建和销毁执行上下文环境，确保代码的正确执行和内存管理。

三、执行上下文的分类

执行上下文可以分为以下三种类型：

1.全局执行上下文（Global Execution Context）

2.函数执行上下文（Function Execution Context）

3.Eval函数执行上下文（Eval Function Execution Context）

需要注意的是，每个执行上下文都会被创建成一个独立的环境，并且在执行完毕后会被销毁。在执行上下文销毁之前，JavaScript引擎会对其进行垃圾回收，以便释放不再使用的内存。

全局执行上下文

全局执行上下文是JavaScript程序执行时的默认执行上下文，它是整个程序的顶层执行上下文。当JavaScript程序开始执行时，JavaScript引擎会自动创建并压入全局执行上下文到执行上下文栈中。

全局执行上下文包含了以下几个部分：

1.全局对象（Global Object）：它是全局执行上下文的变量对象，包含了所有全局变量、全局函数等信息。在浏览器环境中，全局对象就是window对象。

2.this值：在全局执行上下文中，this指向全局对象。在浏览器环境中，this指向window对象。

3.外部环境（Outer Environment）：全局执行上下文没有外部环境，它的外部环境为null。

全局执行上下文是整个JavaScript程序的入口，它在程序执行期间始终存在，直到程序结束。所有的变量、函数都会成为全局对象的属性，可以通过全局对象来访问它们。因此，在编写JavaScript程序时，需要注意全局变量的使用，避免命名冲突和全局变量污染。

函数执行上下文

函数执行上下文是当JavaScript引擎执行一个函数时，创建的一个执行上下文。每个函数都会有自己的函数执行上下文。

函数执行上下文包含了以下几个部分：

1.变量对象（Variable Object）：函数执行上下文的变量对象包含了所有函数参数、内部变量、函数声明等信息。

2.作用域链（Scope Chain）：作用域链由当前执行上下文的变量对象和其外部环境的变量对象链组成，用于解析变量的位置。

3.this值：this指向调用该函数的对象。

当函数执行完毕后，函数执行上下文会从执行上下文栈中弹出，程序继续执行上一个执行上下文。

function foo(a, b) {

var c = 1;

function bar() {

var d = 2;

console.log(a, b, c, d);

}

bar();

}

foo(10, 20);

当该代码执行时，JavaScript引擎会创建函数执行上下文，包括变量环境、词法环境和this指向等信息，并将其压入执行上下文栈中。

具体来说，函数foo()的执行上下文包括：

1.变量环境：包括函数参数和在函数内部声明的变量，其中a和b为参数，c为局部变量，d为函数bar()内部的局部变量。

2.词法环境：与变量环境类似，包括函数参数和在函数内部声明的变量，但不包括函数内部嵌套的函数中的变量。

3.this指向：在该代码中，函数foo()是作为普通函数调用的，因此this指向全局对象（浏览器环境下为window对象）。

函数调用：在该代码中，函数foo()会调用内部的函数bar()。

当函数bar()被调用时，JavaScript引擎会创建函数bar()的执行上下文，并将其压入执行上下文栈中。

具体来说，函数bar()的执行上下文包括：

1.变量环境：包括函数参数和在函数内部声明的变量，其中d为局部变量。

2.词法环境：与变量环境类似，包括函数参数和在函数内部声明的变量，但不包括函数内部嵌套的函数中的变量。

3.this指向：在该代码中，函数bar()是作为普通函数调用的，因此this指向全局对象（浏览器环境下为window对象）。

函数调用：函数bar()没有再次调用其他函数。

当函数bar()执行完毕后，JavaScript引擎会将其执行上下文弹出执行上下文栈，此时函数foo()的执行上下文仍在执行上下文栈的顶部。

函数foo()执行完毕后，JavaScript引擎会将其执行上下文弹出执行上下文栈，此时执行上下文栈为空，JavaScript程序执行结束。

Eval函数执行上下文

Eval函数执行上下文是在调用eval函数时创建的执行上下文。Eval函数可以动态地执行JavaScript代码，并且可以访问当前执行上下文的变量和函数。Eval函数执行上下文可以形成嵌套的作用域链，但它通常会被认为是当前执行上下文的一部分，而不是一个单独的执行上下文。

Eval函数是JavaScript中的一个内置函数，用于执行动态创建的JavaScript代码。下面是一个简单的Eval函数案例：

let x = 1;

let y = 2;

let code = "console.log(x + y);"; // 动态创建的代码

eval(code); // 输出结果为3

在上面的例子中，我们创建了一个字符串变量code，该变量存储了要执行的代码，即输出x和y的和。然后，我们调用了eval函数，将字符串code作为参数传入。eval函数将字符串作为JavaScript代码执行，输出了3。

需要注意的是，eval函数的使用应该非常小心，因为它会执行传入的任意代码，可能会导致意料之外的结果，并且可能会有安全隐患。建议在使用eval函数时，必须要确保传入的代码是可信的，避免执行恶意代码。

总结

执行上下文是JavaScript中一个重要的概念，用于描述代码执行时的环境。一个执行上下文可以看作是一个独立的环境，包含了当前代码执行所需的所有信息，如变量、函数、this指向等。JavaScript中有三种类型的执行上下文：全局执行上下文、函数执行上下文和eval函数执行上下文。

执行上下文分为两个阶段：创建阶段和执行阶段。在创建阶段，JavaScript引擎会对代码进行解析，并将变量和函数声明添加到当前执行上下文的作用域中。在执行阶段，JavaScript引擎会逐行执行代码，并完成变量赋值、函数调用、this指向、闭包和垃圾回收等任务。