JS 执行上下文：用 2.5k 字理解执行上下文内部运转机制
2023-09-05 10:24:55
在 JavaScript 中，执行上下文是 JavaScript 运行时（Engine）在执行代码时所处的一种上下文环境，它定义了 JavaScript 代码的执行环境，包括变量、函数、对象等，在理解 JavaScript 的代码运行流程时是十分重要的一个概念。
要理解执行上下文，我们首先要理解 JavaScript 的执行过程。JavaScript 的执行过程可以分为两个阶段：编译阶段和执行阶段。在编译阶段，JavaScript 引擎会将 JavaScript 代码编译成字节码，字节码是一种计算机可以理解的指令集。在执行阶段，JavaScript 引擎会根据字节码来执行 JavaScript 代码。
执行上下文在 JavaScript 的执行过程中扮演着重要的角色。当 JavaScript 引擎执行代码时，它会为每个函数创建一个执行上下文。执行上下文包含了函数的局部变量、参数、作用域链和this值。当 JavaScript 引擎执行函数时，它会将函数的执行上下文压入执行栈。当函数执行完毕后，JavaScript 引擎会将函数的执行上下文从执行栈中弹出。
执行上下文包含了以下几个重要的概念：
- 变量提升 ：在 JavaScript 中，变量在声明之前就可以使用，这被称为变量提升。变量提升会将变量的声明移动到代码的顶部。
- 作用域链 ：作用域链是一个包含当前执行上下文及其所有父执行上下文的对象列表。作用域链用于查找变量和函数。
- this ：this值是一个指向当前执行上下文中的对象。this值可以用来访问对象的属性和方法。
- 闭包 ：闭包是指可以访问其定义范围之外的变量的函数。闭包在 JavaScript 中非常常见。
理解执行上下文对于理解 JavaScript 的运行机制和执行过程至关重要。通过学习本文，您将能够对 JavaScript 的执行过程有一个更加深入的理解。
执行上下文与执行栈
在深入介绍执行上下文之前，我们首先来了解一下执行栈，因为执行上下文与执行栈是紧密相关的。
执行栈（Call Stack）是一个数据结构，它存储了 JavaScript 引擎正在执行的函数的调用顺序。当 JavaScript 引擎执行一个函数时，它会将函数的执行上下文压入执行栈。当函数执行完毕后，JavaScript 引擎会将函数的执行上下文从执行栈中弹出。
执行栈是一个后进先出（LIFO）的数据结构，这意味着后压入执行栈的函数会先被执行。执行栈可以用来跟踪 JavaScript 代码的执行过程。
执行上下文的组成
执行上下文由以下几个部分组成：
- 变量对象（VO） ：变量对象存储了函数的局部变量和参数。
- 作用域链 ：作用域链是一个包含当前执行上下文及其所有父执行上下文的对象列表。作用域链用于查找变量和函数。
- this ：this值是一个指向当前执行上下文中的对象。this值可以用来访问对象的属性和方法。
执行上下文的创建
当 JavaScript 引擎执行一个函数时，它会为该函数创建一个执行上下文。执行上下文的创建过程如下：
- 创建一个新的变量对象。
- 将新的变量对象压入作用域链。
- 将函数的this值压入作用域链。
- 将新的执行上下文压入执行栈。
执行上下文的销毁
当函数执行完毕后，JavaScript 引擎会将函数的执行上下文从执行栈中弹出。执行上下文的销毁过程如下：
- 将函数的执行上下文从执行栈中弹出。
- 将函数的this值从作用域链中弹出。
- 将新的变量对象从作用域链中弹出。
变量提升
变量提升是 JavaScript 中的一个重要概念。变量提升会将变量的声明移动到代码的顶部。这意味着变量在声明之前就可以使用。
变量提升的原理是：当 JavaScript 引擎解析代码时，它会先将所有的变量声明提升到代码的顶部。然后，再执行代码的其余部分。
变量提升可以带来一些好处，例如：
- 提高代码的可读性。
- 避免变量声明错误。
但是，变量提升也可能带来一些问题，例如：
- 变量在声明之前就可以使用，这可能会导致错误。
- 变量提升可能会导致变量被意外地覆盖。
为了避免变量提升带来的问题，我们应该尽量在使用变量之前先声明变量。
作用域链
作用域链是一个包含当前执行上下文及其所有父执行上下文的对象列表。作用域链用于查找变量和函数。
作用域链的搜索顺序是：
- 当前执行上下文的变量对象。
- 当前执行上下文的父执行上下文的变量对象。
- ...
- 全局执行上下文的变量对象。
如果在某个执行上下文中找不到变量，那么 JavaScript 引擎就会继续在该执行上下文的父执行上下文中查找。以此类推，直到找到变量或者到达全局执行上下文。
作用域链可以用来实现变量作用域的层级结构。变量的作用域是指变量可以被访问的范围。在 JavaScript 中，变量的作用域可以是全局作用域、函数作用域或者块作用域。
- 全局作用域 ：全局作用域是指整个 JavaScript 程序都可以访问的变量。全局作用域中的变量可以被任何函数和代码块访问。
- 函数作用域 ：函数作用域是指函数内部的变量。函数作用域中的变量只能被该函数及其内部的代码块访问。
- 块作用域 ：块作用域是指代码块内部的变量。代码块包括花括号括起来的部分。块作用域中的变量只能被该代码块内部的代码访问。
this
this值是一个指向当前执行上下文中的对象。this值可以用来访问对象的属性和方法。
this值在不同的执行上下文中具有不同的值。在全局执行上下文中，this值指向window对象。在函数执行上下文中，this值指向函数的调用者。
this值可以用来实现面向对象编程。面向对象编程是一种编程范式，它将程序组织成对象。对象是一个包含数据和行为的实体。
在 JavaScript 中，可以使用this值来访问对象的属性和方法。例如，以下代码使用this值来访问对象person的name属性：
const person = {
name: "John",
};
console.log(person.name); // John
闭包
闭包是指可以访问其定义范围之外的变量的函数。闭包在 JavaScript 中非常常见。
闭包的原理是：当一个函数被创建时，它会捕获其定义范围内的所有变量。即使函数已经执行完毕，这些变量仍然存在于内存中。闭包可以用来实现数据封装和状态管理。
以下代码演示了一个闭包的例子：
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
函数createCounter返回了一个闭包函数。闭包函数可以访问其定义范围内的变量count。即使函数createCounter已经执行完毕，变量count仍然存在于内存中。因此，闭包函数可以多次调用，每次调用都会增加count的值。
eval() 函数
eval() 函数可以将字符串解析为 JavaScript 代码并执行。eval() 函数可以用来动态执行代码。
以下代码演示了eval() 函数的用法：
const code = "console.log('Hello, world!');";
eval(code); // Hello, world!
eval() 函数可以用来动态执行代码。但是，eval() 函数也存在一些安全隐患。如果传入eval() 函数的字符串包含恶意代码，那么恶意代码就会被执行。因此，在使用eval() 函数时，一定要注意安全。
总结
执行上下文是 JavaScript 运行的基础，理解执行上下文对于理解 JavaScript 的运行机制和执行过程至关重要。通过学习本文，您应该已经对执行上下文有了更深入的了解。
