JavaScript 闭包

2023年1月19日 178次阅读 来源: Esa小喵

什么是闭包

要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

function f1(){
　　　　var n=1;
　　　　function f2(){
　　　　　　alert(n); // 1
　　　　}
　　}

上面代码中的f2函数，就是闭包。能够读取其他函数内部变量的函数，有权访问另一个函数作用域内变量的函数都是闭包。由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1外部读取它的内部变量了。

function f1(){
　　　　n=1;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 1

或

function f1(){
　　　　n=1;
　　　　return function f2(){
　　　　　　alert(n);
　　　　}
　　}
　　var result=f1();
　　result(); // 1
这里要注意，变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

闭包的特点

请对比下面两段代码的区别，counter 最后结果是多少。

var add = (function () {
    var counter = 0;
    return counter += 1;
})();
add();
add();
add();
// 计数器为 1

var add = (function () {
    var counter = 0;
    return function f2() {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3

第一段代码，因为每次执行函数的时候都会被重新赋值，所以不管执行多少次，counter都是1。
第二段代码，在这段代码中，add实际上调用的是内部函数f2。它一共运行了3次，counter第一次的值是1，counter第二次的值是2，counter第三次的值是3。这证明了，函数中的局部变量counter 一直保存在内存中，并没有在调用后被自动清除。为什么会这样呢？原因当f2被赋给了一个全局变量，这导致f2始终在内存中，因此它的父内也会始终在内存中，不会在调用结束后，被垃圾回收机制回收,所以var counter = 0;不会被回收。
这段代码中另一个值得注意的地方，我为什么说f2被赋给了全局变量，那是因为“return function f2() {return counter += 1;}”这一行，在f2前面没有使用var关键字，因此 f2是一个全局变量，而不是局部变量。当然也可以把f2去掉，如下：

var add = (function () {
    var counter = 0;
    return function() {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3

那么function() {return counter += 1;}就是一个匿名函数，而这个匿名函数本身也是一个闭包，相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

闭包的注意点

  • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。比如上面的代码可以把counter =null。
  • 如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。

最常见的坑

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

这可能是道网红面试题了，你觉得这段代码会打出来0、1、2、3、4，结果万万没想到输出结果是5、5、5、5、5。翻看一下上文提到的作用域，是不是知道怎么改造这段代码了呢？

for (var i = 0; i < 5; i++) {
    function foo() { //父级函数
        setTimeout(() => {
            console.log(i);
        }, i * 1000);
    }
    foo()
}

结果不如愿，你可能会问为什么这样写不对，为什么还是5、5、5、5、5 。
究其原因原来是因为，setTimeout在调用的时候虽然与foo()的内部形成了闭包，但是我们并没有把i的值给限定在每一个闭包里面。改造好的代码如下：

for (var i = 0; i < 5; i++) {
    function foo(i) { //父级函数
        setTimeout(() => {
            console.log(i);
        }, i * 1000);
    }
    foo(i)
}
    原文作者：Esa小喵
    原文地址: https://www.jianshu.com/p/654fdc33522d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞