在 JavaScript 单页应用（Single Page Application, SPA）的开发中，闭包是常用的一种编程手段，但是不恰当地使用闭包会导致内存泄露的问题。本文将详细介绍闭包的概念及其与内存泄露的关系，以及如何避免闭包导致的内存泄露问题。
什么是闭包
闭包（Closure）指的是函数可以访问定义在自身函数外部的变量。具体来说，当一个函数被定义时，它会创建一个作用域链，该作用域链包括函数所在的作用域以及函数定义时闭合的外部作用域，也就是定义该函数时所在的作用域。
function outerFunc() {
var outerVar = 'outerVarValue'
function innerFunc() {
console.log(outerVar)
}
innerFunc()
}
outerFunc() // 输出：outerVarValue在上述代码中，innerFunc 函数可以访问 outerFunc 函数中创建的变量 outerVar，因为 innerFunc 函数定义时所在的作用域包含了 outerFunc 函数的作用域。
闭包与内存泄露
但是，当闭包被误用时，会导致内存泄露的问题。具体来说，如果一个函数内部定义了其他函数并且将这些函数作为返回值返回，那么这些被返回的函数将会持有该函数的作用域及其内部变量的引用，这种引用被称作引用闭包。
function outerFunc() {
var outerVar = 'outerVarValue'
return function innerFunc() {
console.log(outerVar)
}
}
var innerFunc = outerFunc()
innerFunc() // 输出：outerVarValue在上述代码中，outerFunc 函数返回了一个函数 innerFunc，这个 innerFunc 函数持有了 outerFunc 函数的作用域及其内部变量 outerVar 的引用。如果 innerFunc 并没有被正确地处理，那么它会一直持有该作用域及其内部变量的引用，从而导致内存泄露的问题。这种情况下，我们需要及时地释放不再使用的闭包的引用，以避免内存泄露。
避免闭包导致的内存泄露
避免闭包导致的内存泄露的方法是释放不再使用的闭包的引用。下面介绍一些常见的方法：
方法一：手动销毁引用
在使用闭包时，程序员可以手动销毁闭包的引用。在以下情况下，需要手动销毁闭包的引用：
- 当闭包不再被使用时，程序员应该显式地将其置为
null，从而释放其引用的作用域及其内部变量。 - 当 DOM 元素被销毁时，其上注册的事件监听器或者其他函数中使用的闭包必须被手动销毁。
function addEvent(el, evt, func) {
el.addEventListener(evt, function() {
func()
el = null // 手动销毁闭包的引用
func = null
})
}手动销毁引用虽然可以有效地避免内存泄露，但是这种方法需要程序员编写额外的代码，增加了程序的复杂度。
方法二：使用块级作用域
在使用闭包时，程序员可以尽可能地使用块级作用域，从而降低闭包的嵌套深度。在以下情况下，建议使用块级作用域：
- 在循环结构中使用闭包时，将闭包定义在循环体内部。
for (var i = 0; i < 10; i++) {
(function(j) {
// 使用块级作用域定义闭包
console.log(j)
})(i)
}- 当需要在函数内定义多个闭包并且这些闭包需要访问相同的外部变量时，可以将这些闭包的共同外部变量定义在一个块级作用域内部。
-- -------------------- ---- -------
-------- ----------- -
--- --------- - ----------------
-
-- -----------
--- ---------- - ---------- -
----------------------
-
--- ---------- - ---------- -
----------------------
-
-
------------ -- -----------------
------------ -- -----------------
-
-----------使用块级作用域可以减少闭包的嵌套深度，从而减小内存占用。
方法三：使用 WeakMap/WeakSet 对象
在使用闭包时，可以将外部变量存储在弱引用的 WeakMap/WeakSet 对象中，从而避免闭包对这些外部变量的长期引用。
-- -------------------- ---- -------
--- ----- - --- ---------
-------- ----------- -
--- -------- - ---------------
--- --------- - ---------- -
--------------------------------
-
------------------- ---------------------- -- -- ------- --------
------ ---------
-
--- --------- - -----------
----------- -- ----------------------在上述代码中，使用 cache 对象缓存了 outerVar 变量，并将其设为弱引用。这样，当内部函数 innerFunc 不再被使用时，其引用的 outerVar 变量也将被释放。
总结
闭包是 JavaScript 中一个强大的编程手段，但是不适当地使用闭包会导致内存泄露的问题。本文介绍了闭包的概念及其与内存泄露的关系，以及如何避免闭包导致的内存泄露问题。为了避免内存泄漏，建议使用块级作用域、手动销毁引用以及使用 WeakMap/WeakSet 对象等方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646bdf29968c7c53b0b02d03