什么是闭包？

冷不防 2022-11-26 14:56 200阅读 0赞

## 我们都知道一个概念。 ##

在JS当中，一个函数可以访问其外部的变量资源。

![format_png][]

一个典型的代码

**但以下这种情况会出错。**

function m1(){
        var a = 100;
        console.log(a++);
    }
    
    function m2(){
        console.log(a++);   //这里无法访问a
    }

如果，我们想在m2的作用域里，访问m1里的变量，就像下面这样：

![format_png 1][]

首先，我们可以在m1的内部创建一个函数m3

function m1(){
        var a = 100;
        function m3(){
            console.log(a++);
        }
    }

![format_png 2][]

m3可以正常访问a，接下来我们增加一个return操作。

function m1(){
        var a = 100;
        return function m3(){
            console.log(a++);
        }
    }

既然有了返回值，那我们不妨接收一下，继续编写代码如下：

function m1(){
        var a = 100;
        return function m3(){
            console.log(a++);
        }
    }
    var _m3 = m1();

我们执行了函数**m1**, 并将返回值赋值给**\_m3**，

那么目前**\_m3**和**m3**函数是等价的，即它们是同一个函数。

**有了\_m3，一切都好办了。我们继续编写代码**

function m1(){
        var a = 100;
        return function m3(){
            console.log(a++);
        }
    }
    var _m3 = m1();
    
    function m2(){
        _m3();
    }

因为**\_m3**是全局变量，因此**m2**可以调用**\_m3**

也就等价于**m2**间接的，访问到了变量**a**

![format_png 3][]

通常，我们管**m3**，叫做一个**『 闭包函数 』**

**下面列举几个常见的闭包场景：**

**01**

for(var i=0; i<list.length; i++){
        var item = list[i];
        item.onclick = (function(num){
            return function(){
                //......
            }
        })(i);
    }

**02**

function (){
        var that = this;
        setTimeout(function(){
            //......
        },2000)
    }

**03**

function User(){
        var _age = 0;
        this.getAge = function(){
            return _age;
        }
        this.setAge = function(age){
            this._age = age;
        }
    }

**04**

(function(){
        var cache = [...];
        return {
            get : function(){
                //...
            }
        };
    })()

**05**

(function(){
        var t = null;
        return function(){
            if(!t){
                t = create();
            }
        }
    })()

##    为了创造闭包，有时候会写函数自调用 ##

## 可以不这么麻烦么？？ ##

当然，那就是使用let。

例如

for(let i=0; i<list.length; i++){
        let item = list[i];
        item.onclick = function(){
            console.log(i);
            //观察变量i的值  
        };
    }

**关于闭包的疑问**

当函数**m1**执行完成的时候，内部的变量**a**，理论上应该被回收掉了。

![format_png 4][]

可是为什么变量**a**依然可以被访问呢？

主要是因为，**m3**还在引用它

![format_png 5][]

垃圾回收器显然不会回收一个依然被引用的变量。

除非这个变量，已经无人引用，即是说，它已经无法再内存里被找到。

此时才可以当做垃圾处理。

不过m3可以访问变量a这种规则，并不是在所有编程语言里都生效的。因此，这也算是JS的特性之一。

[format_png]: /images/20221124/89191041dbf741c8bb7cfd201fe5cb4c.png
[format_png 1]: /images/20221124/b2dd72550c0b4512a5241a7aa284f4bf.png
[format_png 2]: /images/20221124/d007ec153cd14a1c930d23d3660e9d22.png
[format_png 3]: /images/20221124/45384954a5384be5bea315b5a3a918cb.png
[format_png 4]: /images/20221124/f776abaa1d97484d9a1dd17ee36c3a80.png
[format_png 5]: /images/20221124/79c97b601255462989bee817f98e0e33.png