JavaScript 执行上下文：你真的了解它吗？

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

背景

JavaScript 是一种高级的脚本语言，广泛应用于网页开发。其灵活性和动态特性使得 JavaScript 能够在不同的上下文中运行。理解执行上下文的概念对于开发者来说至关重要，因为它直接影响代码的执行流程和作用域的管理。本文将深入探讨执行上下文的原理、特点、相关代码示例，并提供参考资料和注意事项。

原理

1. 什么是执行上下文

执行上下文指的是代码在执行时所处的环境。它包含了执行代码所需的信息，比如变量、函数、以及在执行过程中访问的对象。JavaScript 在运行时会创建一个执行上下文，以管理这些信息。执行上下文的主要作用是维护当前代码块的环境状态。

2. 执行上下文的类型

JavaScript 中的执行上下文主要分为三种类型：

• 全局执行上下文：即浏览器加载的 JavaScript 文件的全局作用域。只有一个全局执行上下文在任何 JavaScript 代码运行时存在。变量和函数在全局上下文中可被任何代码访问。

• 函数执行上下文：每当一个函数被调用时，都会创建一个新的函数执行上下文。每个函数都有自己的作用域，影响函数内部的变量查找。

• Eval 执行上下文：在 eval 函数中执行的代码会创建一个新的执行上下文，不过实际应用中很少使用 eval。

3. 执行上下文的生命周期

执行上下文的生命周期包括以下几个阶段：

• 创建阶段：该阶段创建了上下文的变量对象（Variable Object）、词法环境（Lexical Environment）和作用域链（Scope Chain）。变量对象会存储所有在执行上下文中声明的变量、函数和参数。

• 激活阶段：在执行上下文开始执行时，激活阶段会读取变量对象中的数据并将其放入到内存中。然后执行函数内部的代码。

• 执行阶段：执行上下文中代码的实际执行阶段。

4. 词法环境和作用域链

词法环境是执行上下文中一个重要的概念，它由环境记录和一个指向外部环境的引用组成。作用域链则定义了变量的可访问区域。每当进入一个新的执行上下文，都会形成一个新的作用域链，以确保变量的正确查找。

特点

1. 单一性：在一个上下文中只有一个正在执行的代码块，可以分为多个执行上下文，但同一时刻只有一个处于活动状态。

2. 栈结构：执行上下文以栈的方式存储，新的上下文会在栈顶，完成后会被弹出，支持函数调用的嵌套。

3. 作用域隔离：每个函数都有自己的执行上下文，保证了变量不会相互干扰。外部作用域可以通过作用域链访问内部变量。

4. 动态性：执行上下文是动态创建的，每次调用函数时都会新建一个上下文，从而确保了函数的运行环境。

代码案例

以下是一个简单的代码示例，演示了执行上下文的创建和作用。

function outerFunction() {
    const outerVariable = 'I am from outer function';

    function innerFunction() {
        const innerVariable = 'I am from inner function';
        console.log(outerVariable); // 访问外部变量
        console.log(innerVariable); // 访问内部变量
    }

    innerFunction();
}

outerFunction();

执行过程分析

1. 当 outerFunction 被调用时，创建全局执行上下文并将其推入栈。
2. outerFunction 内创建了一个新的执行上下文，并将其推入栈。
3. innerFunction 被调用时， 又创建了 innerFunction 的执行上下文，并将其推入栈。
4. 在 innerFunction 内部，可以访问到 outerVariable（外部变量）和 innerVariable（内部变量）。
5. 当 innerFunction 执行完成后，相应上下文被弹出。
6. 然后返回到 outerFunction 的执行上下文，再次弹出。

输出结果为：

I am from outer function
I am from inner function

参考资料

1. MDN Web Docs - JavaScript
2. JavaScript.info - Execution Context
3. You Don’t Know JS: Scope & Closures

注意事项

1. 避免全局变量冲突：尽量减少全局变量的使用，使用模块化编程或立即调用函数表达式（IIFE）来维护封闭的作用域。

2. 理解作用域：搞清楚执行上下文的作用域链，这样可以更有效地调试作用域相关的问题，避免变量未定义或访问错误。

3. 避免闭包陷阱：频繁使用闭包可能引起内存泄漏，要合理管理闭包的使用，特别是需要避免无用的引用。

4. 性能考量：复杂的嵌套函数会增加执行上下文的栈深度，可能导致性能问题。尽量减少深度嵌套的函数调用。

结论

JavaScript 的执行上下文是理解其执行机制的核心概念。这一概念不仅帮助开发者管理作用域，还能优化代码结构和解决变量访问问题。通过深入理解执行上下文及其生命周期，开发者可以更高效地编写、调试和维护 JavaScript 代码。掌握这些基础知识，将为后续的开发过程打下坚实的基础。