一、JavaScript闭包的定义
概念上，闭包是一个函数与其相关的引用环境的组合。一个闭包允许你访问定义自身外部作用域的变量，即使这个函数执行的环境并非它被声明的环境。每当创建一个函数并且检索一个作用域外的变量时，就会创建一个闭包。
二、JavaScript闭包的工作原理
要理解闭包的工作原理，我们首先需要理解JavaScript中的作用域。我们可以将作用域理解为一系列的"框架"，保存了在函数执行过程中定义的变量和函数。
当函数访问一个变量时，它首先会在自己的作用域查找。如果没有找到，它会继续在外层作用域查找，直到查找到全局作用域。如果在所有作用域都没有找到这个变量，那么它就是未定义的。
在JavaScript中，只有函数可以创建新的作用域。闭包发生在一个函数访问一个在其自身作用域之外定义的变量。 下面是一个简单的闭包示例： [JavaScript] 纯文本查看 复制代码 function outerFunction() {
const outerVariable = "我是外部变量";
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const myInnerFunction = outerFunction();
myInnerFunction(); // "我是外部变量"
以上代码中，innerFunction是一个闭包，因为它可以访问outerFunction的作用域，包括其变量outerVariable。
三、JavaScript 闭包的特点- 访问外部作用域变量：闭包允许函数访问其定义时所在的外部作用域中的变量。这意味着即使外部作用域已经执行完毕，闭包仍然可以引用和操作外部作用域中的变量。
- 保持变量状态：闭包可以维持其所在作用域的状态。这意味着当一个闭包被创建后，它可以一直保留对外部变量的引用，即使外部函数已经执行完毕，这些变量也不会被销毁。这种特性使得闭包可以创建私有变量和方法。
- 延长变量生命周期：由于闭包保持对外部变量的引用，这些变量的生命周期可能会被延长。如果一个闭包被保存在一个全局变量或其他长期存在的地方，那么与该闭包相关的所有变量都不会被垃圾回收，可能会产生内存泄漏。
- 创建多个副本：每次调用一个函数时，都会创建一个新的闭包，包含独立的变量实例。这意味着可以通过多次调用同一个函数来创建多个副本，每个副本都有自己独立的变量状态。
- 提供私有性和封装性：通过使用闭包，可以模拟私有变量和方法。将变量和方法封装在闭包中，外部代码无法直接访问和修改这些变量和方法，从而实现了一定程度的数据隐藏和保护。
- 增加内存消耗：由于闭包保留了外部作用域中的变量，这意味着这些变量不会被垃圾回收，可能会增加内存消耗。因此，在使用闭包时需要注意内存管理，避免出现内存泄漏。
四、JavaScript 闭包的类型
1.JavaScript闭包有以下几种类型： 函数作为返回值的闭包：这是最常见的闭包类型。当一个函数内部返回另一个函数时，被返回的函数可以访问并操作其所在的外部作用域中的变量。 [JavaScript] 纯文本查看 复制代码 function outerFunction() {
var outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
var inner = outerFunction();
inner(); // 输出：I am outside!
在这个例子中，innerFunction 是一个闭包，它可以访问并输出 outerFunction 中定义的 outerVariable。
2.函数作为参数的闭包： 当一个函数接受另一个函数作为参数，并在内部使用该参数函数时，参数函数可以访问并操作外部作用域中的变量。 [JavaScript] 纯文本查看 复制代码 function outerFunction(callback) {
var outerVariable = 'I am outside!';
callback();
}
function innerFunction() {
console.log(outerVariable);
}
outerFunction(innerFunction); // 输出：I am outside!
在这个例子中，innerFunction 作为参数传递给了 outerFunction，在 outerFunction 内部调用了 callback 函数，使得 innerFunction 成为了闭包，可以访问并输出 outerVariable。
3.自执行函数的闭包： 当一个函数在定义后立即执行，并且在内部定义了其他函数时，这些内部函数可以访问并操作外部作用域中的变量。 [JavaScript] 纯文本查看 复制代码 function() {
var outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable);
}
innerFunction(); // 输出：I am outside!
}();
在这个例子中，立即执行函数内部的 innerFunction 是一个闭包，它可以访问并输出外部作用域中的 outerVariable。
五、JavaScript闭包的用途闭包有许多用途。在服务端和客户端JavaScript开发中，它们都被广泛使用。
1.创建私有变量和方法 通过使用闭包可以创建私有变量和方法，这些变量和方法只能在闭包内部访问，而外部代码无法直接访问。这样可以实现数据的隐藏和保护，防止外部代码意外修改或访问。 下面是一个简单的示例： [JavaScript] 纯文本查看 复制代码 function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // 输出1
counter(); // 输出2
counter(); // 输出3
在这个示例中，createCounter() 函数返回了一个匿名函数，该匿名函数引用了 count 变量。由于 count 只能在 createCounter() 函数内部访问，因此它是一个私有变量。每次调用 counter() 函数，都会增加 count 的值并输出。
2.封装模块 使用闭包可以封装一组相关的函数和数据，并将其作为一个模块暴露给外部环境。这种模块化的编程方式可以提高代码的可维护性和复用性，同时减少全局命名空间的污染。下面是一个示例： [JavaScript] 纯文本查看 复制代码 const myModule = (function() {
let privateVar = 'I am private';
function privateMethod() {
console.log('This is a private method');
}
return {
publicMethod: function() {
console.log('This is a public method');
},
publicVar: 'I am public'
};
})();
myModule.publicMethod(); // 输出 "This is a public method"
console.log(myModule.publicVar); // 输出 "I am public"
console.log(myModule.privateVar); // undefined
myModule.privateMethod(); // 抛出 TypeError
在这个示例中，我们使用一个立即调用的函数表达式（IIFE）创建了一个模块。模块包含了一个私有变量 privateVar 和一个私有方法 privateMethod，同时还暴露了两个公共成员 publicVar 和 publicMethod。由于只有公共成员会被暴露给外部环境，因此私有成员和函数对外部代码是不可见的。
3.记忆上下文 闭包可以记忆其所在的外部作用域，使得函数在后续调用时可以访问和操作之前保存的上下文信息。这对于处理需要持久状态的任务非常有用，比如定时器、事件处理等。下面是一个示例： [JavaScript] 纯文本查看 复制代码 function createTimer(delay) {
let elapsed = 0;
const timer = setInterval(function() {
elapsed += delay;
console.log(`Elapsed time: ${elapsed}`);
}, delay);
return function() {
clearInterval(timer);
};
}
const stopTimer = createTimer(1000);
setTimeout(stopTimer, 5000);
在这个示例中，createTimer() 函数返回了一个匿名函数，该函数可以停止由 setInterval() 创建的定时器。每次调用 createTimer() 函数，都会创建一个新的闭包实例，保存了 elapsed 变量和 timer 定时器。在后续调用时，闭包可以访问和修改之前保存的状态。
4.实现回调函数 闭包可以用作回调函数，将函数作为参数传递给其他函数，在适当的时机被调用。通过闭包，回调函数可以访问并操作外部作用域中的变量，实现更灵活的编程逻辑。下面是一个示例： [JavaScript] 纯文本查看 复制代码 function add(x, y, callback) {
const result = x + y;
callback(result);
}
function logResult(result) {
console.log(`The result is ${result}`);
}
add(2, 3, logResult);
// 输出 "The result is 5"
在这个示例中，add() 函数接收两个数字和一个回调函数作为参数，计算它们的和并将结果作为参数传递给回调函数。我们可以定义一个回调函数 logResult()，输出结果到控制台。由于回调函数是一个闭包，因此可以访问 add() 函数内部的变量 result。
5.解决循环中的问题 [color=rgba(51, 51, 51, 0.8)]在循环中使用闭包可以解决一些常见的问题，如在定时器或事件处理中正确捕获循环变量的值。由于闭包会创建一个独立的作用域，每次迭代都会生成一个新的闭包实例，从而避免了变量共享和混淆的问题。下面是一个示例： [JavaScript] 纯文本查看 复制代码 const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
console.log(`Button ${i} clicked`);
});
}
在这个示例中，我们使用一个循环绑定多个按钮的点击事件。由于回调函数是一个闭包，每次迭代都会创建一个新的闭包实例，因此可以正确捕获循环变量的值。如果不使用闭包，在回调函数中访问 i 变量时，会发现每个按钮都输出了最终的值。
6.缓存数据 闭包可以用作缓存数据的存储结构。通过将计算结果保存在闭包内部的变量中，可以避免重复计算，提高程序的运行效率。下面是一个示例： [JavaScript] 纯文本查看 复制代码 function createMultiplier(factor) {
const cache = {};
return function(number) {
if (number in cache) {
console.log(`Retrieving from cache: ${number}`);
return cache[number];
} else {
console.log(`Calculating result: ${number}`);
const result = number * factor;
cache[number] = result;
return result;
}
};
}
const double = createMultiplier(2);
console.log(double(3)); // 输出 "Calculating result: 3" 和 "6"
console.log(double(4)); // 输出 "Calculating result: 4" 和 "8"
console.log(double(3)); // 输出 "Retrieving from cache: 3" 和 "6"在这个示例中，createMultiplier() 函数返回一个函数，该函数可以将输入数字乘以指定的因子。同时，该函数通过闭包实现了缓存功能。如果输入的数字已经存在于缓存中，则直接返回缓存中的结果。否则，计算并缓存计算结果。这样可以避免重复计算，提高程序效率。
六、闭包的注意事项虽然闭包有许多有用的应用，但不恰当的使用闭包也可以带来问题，尤其是在处理内存管理的时候。因为闭包可能会导致原本应该被垃圾回收的对象得不到清理，进而产生内存泄漏。
1.内存泄漏： 闭包会引用外部作用域中的变量，如果闭包长时间存在而不释放相关资源，可能导致内存泄漏。解决方法是在不需要使用闭包时，及时释放它们所占用的资源，比如清除定时器、解绑事件监听器等。 [JavaScript] 纯文本查看 复制代码 function createClosure() {
const data = 'Some data';
// 创建闭包并在适当时机释放资源
const closure = function() {
console.log(data);
// 其他操作...
};
// 定时器
const timer = setInterval(closure, 1000);
// 清除定时器并释放资源
function releaseResources() {
clearInterval(timer);
// 其他资源释放操作...
}
return releaseResources;
}
const release = createClosure();
// 当不再需要闭包时，调用 release() 进行资源释放
release();
2.变量共享和混淆： 由于闭包会保留对外部作用域中变量的引用，可能出现多个闭包共享同一个变量的情况，进而导致意外的结果。解决方法是在创建闭包时使用立即执行函数，将每个闭包实例与其所需的变量隔离开来。 [JavaScript] 纯文本查看 复制代码 for (let i = 0; i < 5; i++) {
(function(index) {
setTimeout(function() {
console.log(index);
}, 1000);
})(i);
}
3.作用域链增加：闭包会在内存中保留对其所在的外部作用域的引用，如果闭包存在的时间过长或嵌套层级过深，会导致作用域链变长，影响性能。解决方法是在不需要使用闭包时，尽早释放它们，避免过度嵌套闭包。 [JavaScript] 纯文本查看 复制代码 function outer() {
const data = 'Some data';
// 创建嵌套闭包
function inner() {
console.log(data);
// 其他操作...
}
// 调用 inner() 并及时释放闭包
inner();
}
outer();
在这个示例中，inner() 函数是一个闭包，它保留了对外部作用域的引用。由于 inner() 在 outer() 中调用，因此可以尽早释放 inner() 所占用的资源，避免过度嵌套闭包。
总结总的来说，闭包是一种将函数内部和外部连接起来的桥梁。掌握了闭包，就等于掌握了JavaScript的一个关键概念，理解了JavaScript的灵魂。它在许多现代的JavaScript设计模式中都有所应用，你会在闭包中发现JavaScript的深奥之趣。但同时，我们也需要注意闭包的过度使用可能会导致内存泄漏等问题，所以在编程中应合理使用。
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡