理解闭包

闭包 是指可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。“闭包” 一词来源于以下两者的结合:要执行的代码块(由于自由变量被包含在代码块中,这些自由变量以及它们引用的对象没有被释放)和为自由变量提供绑定的计算环境(作用域)。

作用域

闭包的一个重点在于作用域,在 JavaScript 中变量的作用域分两种:全局变量与局部变量,首先让我们来了解一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var _global = 1;  // 全局变量

function print() {
var _internal = 2; // 局部变量

console.log(_global); // 1
console.log(_internal); // 2
return _internal;
}

print();
console.log(_global); // 1
console.log(_internal); // ReferenceError: _internal is not defined

此时我们可以看到,在函数内部是可以直接读取全局变量的。但当我们在外部想访问内部变量时,就会报错,因为在函数体外部时无法访问函数内部的变量的。

需要注意的是,当在函数内部定义变量时没用使用 var 等声明变量,那么它实际上会成为一个全局变量

1
2
3
4
5
function print() {
_internal = 2;
}

console.log(_internal); // 2

从内存中解释,变量的声明都存在栈中,而在 JavaScript 中存在垃圾回收机制(garbage collection),当一个函数执行完返回之后,它的内存会被自动回收,此时函数内部的变量都会被销毁。

那么我们有什么方法可以保存这一内存,并且在外部访问函数内部的变量呢 —— 闭包

闭包

在正常情况下,我们在外部时无法修改函数内部变量的值:

1
2
3
4
5
6
7
8
9
10
// 场景 1
function print(x) {
var _internal = 1;

console.log(_internal + 1);
}

print(1); // 2
// ...
print(1); // 2

我们可以看到,无论 print() 调用多少次,打印的值都是 2_internal 的值都是 1

这是因为 JavaScript 中的垃圾回收机制,在多次调用 print() 时,每一次都需要回收前一次的内存,之后再次申请新内存,因此 _internal 无法在内存中继续保存。

换而言之,在每次调用 print() 时都需要为其和内部的变量申请新的内存空间,第一次 _internal 的内存地址可能为 0x...1,在函数调用完成之后,这块内存将被释放,再次调用时 _internal 的内存地址可能就是 0x...2 了。因此它无法再内存中被保存下来。

那么我们需要在外部使用函数内部的变量时,就需要在函数内部再声明一个函数,并将其返回:

1
2
3
4
5
6
7
8
9
10
function print() {
var _internal = 1;

return function log() {
console.log(_internal);
}
}

var test = print();
test(); // 1

此时,我们已经可以从外部访问 print() 函数内部的变量了。

当我们需要对 print() 函数内部的 _internal 的值进行修改时,我们可以给它另外一个函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 场景 2
var add;
function print() {
var _internal = 1;

add = function(x) {
_internal += x;
}

return function log() {
console.log(_internal);
}
}

var test = print();
test(); // 1
add(1);
test(); // 2

经过上述可以看出,函数 print() 在经过 add() 运行之后,_internal 的值分别为 12,这就说明了 _internal 始终保存在内存中,并没有在 var test = print(); 调用时被回收。

这是因为 print() 内的 log() 作为返回值,被赋给 test 这个全局变量,因此 log() 始终在内存中。而 log() 依赖 print() 并且可以访问 _internal,所以 print() 也始终在内存中,而且在 var test = print(); 调用时没有被回收。

换而言之,当 _internal 在声明的时候分配了内存,我们可以将其内存地址表示为 0x...1,在 print() 函数被调用之后应该会被回收,但是由于上述原因,没有被回收,它的值将继续保留在地址为 0x...1 中。在外部可以使用指针去寻址,并取得其值。

其他例子

在循环体中,我们可能遇到:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function loopA() {
var arr = [];

for(var i = 0; i < 10; i++) {
arr[i] = function() {
return i;
}
}

return arr;
}

var test = loopA();
test[0](); // 10
test[1](); // 10
// ...
test[9](); // 10

在上述例子中,我们需要他们执行不同的参数得到不同的值。但是一共创建了 10 次匿名函数,,他们都是共享同一个环境的。在匿名函数执行之前,循环早已完成,此时的匿名函数一局指向循环体中的最后一个值了。

  • 解决方案 1:
    es6 中我们可以使用 let 声明:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function loopA() {
    var arr = [];

    for(let i = 0; i < 10; i++) {
    arr[i] = function() {
    return i;
    }
    }

    return arr;
    }

    var test = loopA();
    test[0](); // 0
    test[1](); // 1
    // ...
    test[9](); // 9
  • 解决方案 2:
    将函数声明放在循环体外部:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function loopA() {
    var arr = [];
    var func = function(n) {
    return n;
    }

    for(var i = 0; i < 10; i++) {
    arr[i] = func(i)
    }

    return arr;
    }

    var test = loopA();
    test[0]; // 0
    test[1]; // 1
    test[9]; // 9
  • 解决方案 3:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function loopA() {
    var arr = [];

    for(var i = 0; i < 10; i++) {
    arr[i] = (function(i) {
    return i;
    })(i)
    }

    return arr;
    }

    var test = loopA();
    test[0]; // 0
    test[1]; // 1
    test[9]; // 9
  • 其他解决方案请看参考

弊端

  • 内存泄漏:由于闭包会使得函数内部的变量都被保存在内存中,不会被销毁,内存消耗很大。因此需要在退出函数之前,将不使用的变量都删除。
  • 会修改函数内部变量的值。

总结

闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

参考

百度百科 - 闭包
Wikipedia - Closure
学习 Javascript 闭包(Closure)
MDN - 闭包
深入理解闭包系列第二篇——从执行环境角度看闭包
深入理解闭包系列第四篇——常见的一个循环和闭包的错误详解
深入理解javascript原型和闭包(15)——闭包

如果觉得有用,您的支持将鼓励我继续创作!