用浏览器调试理解闭包

397 阅读1分钟

一个闭包的例子

    function f1() {
        let a = 0
        function f2() {
            a++
            return a
        }
        return f2
    }
    const result = f1()
    const b1 =result() // b1 = 1
    const b2 =result() // b2 = 2

上面这个例子,因为闭包的原因,a相当于一直存在于内存中,所以b1=1,b2=2。 我们通过浏览器,一步一步的看一下。
开始状态,准备把f1赋值给result。

image.png 下一步赋值,我们首先发现一个Local,这个叫做本地执行上下文,会在函数执行时创建,结束后销毁。这就是为什么如果我们不应用闭包,函数时存不住值的。他的变量都将被销毁。
然后我们看下一个红框,Closure,闭包主角登场,我们看到f2因为用到了f1。所以多了一个闭包,里面存着a。相当于a这个变量就被保存住了。

image.png 我们继续 当调用到const b1 =result()时。result() 被执行。当调用a的时候,其实a已经不存在了,但是因为闭包的原因,他会先从闭包中取值。为0,加加。所有b1为1。

image.png

同理,在执行的时候,Clousre里为1,再加加,所以b2=2 image.png

那什么是闭包呢

我们现在说的闭包,更像怎么形成闭包。一个函数使用了他外层函数的变量。那么我们说,这形成了一个闭包。
我理解闭包,更像是一个背包,一空间。因为js闭包的特性,而贮存使用的外层函数的变量。

闭包的作用

存在闭包里面变量,可以当作一个全局变量来使用,而用不会被轻易污染。也可以当作对象的私有变量来使用。