JavaScript执行（二）：闭包和执行上下文到底是怎么回事？-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

JavaScript执行（二）：闭包和执行上下文到底是怎么回事？

在深入探讨JavaScript的高级特性时，闭包（Closures）和执行上下文（Execution Contexts）是两个核心概念，它们不仅深刻影响着JavaScript代码的执行方式，也是理解JavaScript异步编程、模块化、以及高级函数式编程特性的基石。本章节将详细解析这两个概念，揭示它们背后的工作机制及在实际开发中的应用。

一、执行上下文概述

在JavaScript中，代码的执行总是在某个执行上下文中进行的。执行上下文是JavaScript代码在解析和执行时环境的抽象表示，它定义了代码执行期间的各种变量、函数以及其他资源的可访问性。JavaScript引擎（如V8、SpiderMonkey等）在解析和执行JavaScript代码时，会根据代码的结构创建相应的执行上下文。

执行上下文可以分为两种主要类型：全局执行上下文（Global Execution Context）和函数执行上下文（Function Execution Context）。

全局执行上下文：在JavaScript代码开始执行时首先创建，它是最外层的执行上下文。在浏览器中，全局对象通常是window，而在Node.js环境中则是global。全局执行上下文在脚本执行期间一直存在，直到脚本执行完毕。
函数执行上下文：每当函数被调用时，都会创建一个新的函数执行上下文。这个上下文包含了函数的局部变量、参数、this值以及任何通过arguments对象（或在ES6中通过剩余参数）传递的额外参数。函数执行完毕后，其执行上下文会被销毁，除非有闭包的存在。

二、执行上下文的创建与销毁

每当JavaScript引擎遇到函数调用时，它会执行以下步骤来创建新的函数执行上下文：

创建活动对象（Activation Object）：也称为变量对象（Variable Object, VO）或词法环境（Lexical Environment, LE）的组成部分。它包含了函数的局部变量、函数参数以及this的值。在ES6中，这个概念被更明确地分为词法环境（存储函数声明和变量）和变量环境（存储let和const声明的变量）。
设置作用域链：作用域链是一个对象列表，用于解析标识符（如变量名或函数名）。它始于当前执行上下文的词法环境，然后向上延伸到外部函数的词法环境，直至全局执行上下文。当JavaScript引擎需要查找一个变量时，它会沿着作用域链向上搜索，直到找到该变量或到达全局作用域。
确定this的值：在函数执行上下文中，this的值取决于函数是如何被调用的。它可能是全局对象（在非严格模式下）、调用函数的对象、或者是通过call、apply、或bind方法指定的对象。

函数执行完毕后，其执行上下文会被销毁，除非有闭包的存在。闭包允许函数访问并操作函数外部的变量，即使外部函数已经执行完毕。

三、闭包详解

闭包是JavaScript中一个强大而复杂的特性，它允许一个函数访问并操作函数外部的变量。闭包是基于词法作用域（Lexical Scope）的，这意味着闭包可以访问定义它们时的作用域中的变量，即使这些变量在闭包外部的作用域中已经被销毁。

闭包的形成条件通常包括：

一个函数内部定义另一个函数。
内部函数引用了外部函数的变量。
外部函数的返回值是内部函数。

闭包的应用场景广泛，包括但不限于：

私有变量：利用闭包可以创建私有变量，这些变量只能被闭包内部的函数访问，从而隐藏内部实现细节。
模块化：通过闭包可以模拟模块，实现代码的封装和重用。
函数工厂：闭包可以用来创建具有特定功能的函数工厂。
异步编程：在JavaScript的异步编程中，闭包常用于保存回调函数执行时的状态。

四、闭包与执行上下文的关系

闭包和执行上下文之间存在着紧密的联系。每当一个函数被调用时，都会创建一个新的执行上下文。如果这个函数中定义了另一个函数，并且这个内部函数引用了外部函数的变量，那么当外部函数执行完毕并返回内部函数时，就形成了一个闭包。

闭包之所以能够访问外部函数的变量，是因为它记住了创建它的那个执行上下文的作用域链。即使外部函数的执行上下文被销毁，闭包依然能够沿着这个作用域链找到并访问那些变量。这就是闭包“记住”其词法作用域的原因。

五、闭包与内存管理

闭包的一个潜在问题是它们可能会导致内存泄漏。由于闭包可以访问并操作外部函数的变量，如果这些变量在外部函数执行完毕后仍然被闭包引用，那么这些变量所占用的内存就无法被垃圾回收机制回收。

为了避免这种情况，开发者需要注意以下几点：

确保不再需要的闭包被适当地销毁或解除引用。
谨慎使用闭包，避免不必要的嵌套和复杂的依赖关系。
在使用闭包进行异步编程时，注意处理好回调函数的生命周期。

六、实例解析

以下是一个简单的闭包示例，用于说明闭包的工作原理：

function createCounter() {
    let count = 0; // 外部函数的局部变量
    return function() { // 内部函数，闭包
        count += 1; // 访问并修改外部函数的变量
        return count;
    };
}
const counter = createCounter(); // 调用外部函数，返回内部函数
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

在这个例子中，createCounter函数返回一个内部函数，该内部函数形成了一个闭包，能够访问并修改createCounter函数中的局部变量count。尽管createCounter函数的执行上下文在执行完毕后会被销毁，但由于闭包的存在，count变量所占用的内存仍然被保留，直到闭包不再被引用。

七、总结

闭包和执行上下文是JavaScript中两个至关重要的概念，它们共同构成了JavaScript代码执行的基础框架。通过深入理解这两个概念，开发者可以更好地掌握JavaScript的异步编程、模块化、以及函数式编程等高级特性。同时，也需要注意闭包可能带来的内存管理问题，合理使用闭包，避免不必要的内存泄漏。