JavaScript 函数的执行过程

JavaScript 函数执行过程：作用域链详解

引言

在 JavaScript 中，函数是用来执行特定任务的基本构建块。理解函数的执行过程对于编写高效和可维护的代码至关重要。本文将深入探讨 JavaScript 函数的执行过程，重点关注作用域链。

执行上下文

当一个函数被调用时，JavaScript 会创建一个执行上下文（EC）。EC 是一个包含与函数调用相关的信息的环境，包括：

• 函数的变量和参数
• 函数的词法环境（作用域链）
• 当前执行的代码行

作用域链

作用域链是一个在执行上下文栈中向上搜索变量的链。它定义了函数可以访问的变量。作用域链是从当前函数的作用域开始，然后向上搜索到全局作用域，按照如下顺序：

1. 当前函数的作用域
2. 外部函数的作用域
3. ...
4. 全局作用域

JavaScript 函数执行过程

JavaScript 函数的执行过程可以分为以下几个阶段：

1. 函数声明或表达式

函数可以通过声明或表达式的方式定义：

// 声明方式
function myFunction() {
  // ...
}

// 表达式方式
const myFunction = function() {
  // ...
};

2. 函数调用

当一个函数被调用时，会创建一个新的执行上下文，并将其推送到执行上下文栈。

3. 执行代码

函数代码按照顺序执行。函数可以访问其作用域链中的变量。

4. 返回值

函数执行完毕后，会返回一个值（如果有的话）。

5. 执行上下文销毁

当函数执行完毕时，对应的执行上下文从执行上下文栈中弹出，并销毁其变量和环境。

示例

考虑以下 JavaScript 代码：

function outerFunction() {
  const outerVariable = "outer";

  function innerFunction() {
    const innerVariable = "inner";
    console.log(outerVariable);
  }

  innerFunction();
}

outerFunction();

在这个示例中，执行上下文栈将包含以下执行上下文：

1. outerFunction ：包含 outerVariable 和 innerFunction
2. innerFunction ：包含 innerVariable 和对 outerFunction 中 outerVariable 的访问

当 innerFunction 被调用时，它将从其作用域链中获取 innerVariable。然后它将向上搜索 outerVariable，并找到它在 outerFunction 的作用域中。

重要注意事项

• 作用域链是词法性的： 它在函数被定义时确定，而不是被调用时。
• 变量提升： 在一个函数的作用域中，变量提升会发生在函数代码之前。
• 闭包： 闭包是拥有对外部作用域变量访问权限的函数。

---