JavaScript闭包深入解析：从作用域链到模块化开发的奥秘

莞莞类卿
377 阅读6分钟

JavaScript闭包深入解析：从作用域链到模块化开发的奥秘

JavaScript，作为一门灵活多变的脚本语言，其独特的特性之一便是闭包。闭包的概念虽然初听起来有些抽象，但却是理解JavaScript核心机制——作用域链和词法作用域的关键所在。本文将从作用域链的基础讲起，逐步深入到闭包的定义、作用、实现方式及其潜在的问题，最终探讨闭包在实际开发中的应用，特别是如何利用闭包实现模块化开发，同时有效避免内存泄漏等副作用。

image.png

一、一个简单例子引入闭包概念

var arr=[];
for (var i = 0; i <10; i++) {
  arr[i] =function(){
      console.log(i);
  }
  
}       
arr.forEach(function(item){
  item()
});

思考下这个结果是什么？ 0-9？还是其他结果？

image.png 结果是10个10，为什么会是这个结果，不是0-9呢？

在预编译的那篇讲到（明天发表），函数调用前一刻才会去声明函数，在第一个for循环中arr[i] =function(){}是函数声明，在函数调用之前并不会执行，所以在第一个for循环中，i不断在增加，并没有打印。在第二个循环中，调用了函数，开始打印i,这时的i经过第一个for循环，值变为10，所以打印结果为10个10。

如果我要打印0-9，我应该怎么修改代码呢？

第一种：

var arr=[];
for (let i = 0; i <10; i++) {
    arr[i] =function(){
        console.log(i);
    }

}     //let+{}块级作用域

arr.forEach(function(item){
    item()
});

这里有一个知识点，也会在作用域那篇讲到， let+{}会形成块级作用域，我每一次执行循环时，会形成一个块级作用域，当我调用函数用到i时，我先会在块级作用域中寻找是否有i元素，如果没有再到外面去寻找。

image.png 第二种就是要用到今天要讲的闭包啦，这里先卖个关子。

二、作用域链与词法作用域：闭包的基石

2.1 作用域链的概念与运作机制

在JavaScript中，每当执行一段代码时，都会生成一个执行上下文。这个执行上下文中包含了当前执行环境的所有信息，其中最为重要的是变量环境。作用域链正是在这个变量环境中被构建起来的，它是一个链式结构，用于确定变量的访问权限和查找顺序。

当引擎需要访问一个变量时，首先会在当前作用域中查找，如果未找到，则继续向上一层作用域寻找，直到全局作用域。这一过程形象地描述了作用域链的工作原理，即“就近原则”与“逐级向外”的结合。

2.2 词法作用域：静态作用域的体现

与动态作用域相对，JavaScript采用的是词法作用域（Lexical Scoping）。这意味着函数的作用域在代码编写阶段就已经确定，由函数定义的位置而非调用位置来决定。这种机制保证了代码的可预测性，使得开发者可以准确判断哪些变量在特定函数中是可见的。

三、闭包的定义与实现

3.1 闭包的定义

根据js词法作用域的规则，内部函数总是能访问外部函数中的变量，当通过调用一个外部函数返回的的一个内部函数后，即使外部函数执行已经结束了，但是内部函数引用了外部函数中的变量，也依旧需要保存在内存中，我们把这些变量的集合叫做闭包。

3.2 闭包的实现机制

闭包的核心在于，内部函数维持了一个对其包含它的外部函数作用域的引用，这个引用使得外部函数的局部变量不会在外部函数执行完毕后立即销毁，从而达到“记忆”状态的目的。例如：

function outer() {
    var count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}

var closure = outer();
closure(); // 输出 1
closure(); // 输出 2

在上面的例子中，inner函数就是一个闭包，因为它能够访问并修改outer函数的局部变量count，即使在outer函数执行结束后。

四、闭包的作用与优势

4.1 实现共有变量

在多函数协作的场景下，闭包可以用来创建共享的私有变量，避免了全局变量的滥用，减少了命名冲突的风险。这对于大型项目或模块化开发至关重要。

4.2 做缓存

闭包可以用来缓存计算结果，避免重复运算。例如，对于一些复杂的计算逻辑，可以将其结果存储在一个闭包内的变量中，下次需要时直接读取，提高效率。

4.3 封装模块，防止全局污染

通过闭包，可以实现更加精细的模块化设计，每个模块拥有自己的私有变量和方法，通过暴露必要的接口与外界交互，从而减少全局变量的使用，保持代码的整洁和低耦合。

五、闭包的缺点与挑战

5.1 内存泄漏风险

由于闭包会维持对外部变量的引用，如果不恰当使用，可能会导致这些变量长时间驻留在内存中，无法被垃圾回收机制回收，进而引发内存泄漏问题。

5.2 性能考量

大量使用闭包，尤其是深层次的闭包，可能会影响JavaScript引擎的性能，因为每次访问变量都需要遍历整个作用域链。

六、实践中的闭包应用与优化策略

6.1 模块化开发的最佳实践

在ES6引入了let、const以及模块系统之后，闭包的应用场景有所减少，但仍不失为一种有效的封装手段。利用IIFE（立即调用的函数表达式）和暴露模块接口，可以高效地构建自包含的模块。

6.2 避免不必要的闭包

合理规划代码结构，尽量减少不必要的闭包使用，尤其是在不需要保留外部作用域变量的情况下。对于需要长期存在的数据，考虑使用更轻量级的数据管理方案。

6.3 清理闭包引用

对于那些不再需要的闭包，应主动断开它们对数据的引用，帮助垃圾回收机制及时回收无用资源，避免内存泄漏。

七、完善开头代码

现在把开头引入的例子，用闭包的形式修改。

var arr=[];
for (var i = 0; i <10; i++) {
    (function (j){
        arr[j] =function(){
            console.log(j);
        }
    }
   )(i);
} 
arr.forEach(function(item){
    item()
});

image.png 这就是用到今天讲的闭包啦。

结语

闭包是JavaScript语言设计中的一个重要且微妙的特性，它既强大又充满挑战。正确理解和运用闭包，不仅能够提升代码的组织性和可维护性，还能有效地解决一些特定的编程难题。然而，正如同任何强大的工具一样，闭包的使用也需要谨慎，以免引入不必要的复杂度和性能问题。通过持续学习和实践，开发者可以更好地掌握闭包的精髓，将其转化为提升开发效率和代码质量的强大武器。

avatar
文章
阅读
粉丝