js闭包如何理解？

梦里梦外; 2023-06-19 05:29 49阅读 0赞

js的闭包是JavaScript特别的一种形式，在我查阅了各种资料之后，终于总结出了他的规律和自己的理解，下面就让我们瞅一瞅。

## 1.作用域 ##

\[\[scopel\]:每 个javascript函数都是一个对象， 对象中有些属性我们可以访问，但有些不可以，这些属性仅供javascript引擎存取，\[scope\]\]就是其中一 个。\[\[scopel\]指的就是我们所说的作用域，其中存储了运行期上下文的集合。

作用域链: \[\[scopel\]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。

上面就是作用域的解释，但我知道大家看不懂，下面我给大家重新讲解一下。我们所说的作用域，其中存储了运行期上下文的集合。大家可能不知道运行期上下文的集合是什么，他就是我上篇博客所写的AO对象。  
(如果大家不懂的话，可以去看一看我上篇写的博客，js的预编译里面详细的阐述了上面是Ao对象和GO对象的生成过程。)  
作用域和我们的预编译不同，当我们函数被定义的时候它的作用域就已经出现了，例如：

var a = 10
            function fn() {
        
                var a = 10;
                function b() {
        
                    ++a
                    console.log(a)
                }
                return b;
            }

此时fn函数的作用域为  
![在这里插入图片描述][20191204204922119.png]  
然后执行我们的函数：

var a = 10
            function fn() {
        
                var a = 10;
                function b() {
        
                    ++a
                    console.log(a)
                }
                return b;
            }
            var res = fn()

这是fn函数执行，就会产生自己的AO对象并且作用域会链接这GO对象！此时fn函数的作用域为：（直接写执行的AO对象了，不写执行前一刻的AO对象了）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]  
此时随着我们的fn函数的执行，我们的b函数也被定义了！所以他会形成自己的作用域，fn函数的定义实在全局下，所以他会拥有GO对象，由此可见当我们的b函数在fn里定义时，他就会拥有fn的AO和fn的GO，并且继续随着fn函数的执行，他会将b函数返回到外部，最后fn函数执行结束！当fn函数执行完成是，它的AO对象也会销毁。下面开始重点，闭包！

## 2.闭包 ##

js是一门轻量级语言，所以他很重视运行缓存，所以每当一个函数执行完毕，他就会销毁自己的AO，用来清除内存缓存，正常情况下fn执行完，它的AO对象就被销毁了！  
但是上面函数不同，哪里不同呢？就是因为它返回了函数内部的一个函数和他的作用域！让我们来执行一下：

var a = 10
            function fn() {
        
                var a = 10;
                function b() {
        
                    ++a
                    console.log(a)
                }
                return b;
            }
            var res = fn() // function b() { ++a ；console.log(a) }
            res() // 10+1 = 11

因为返回了b的作用域，所以在我们执行函数b的前一刻他会生成属于自己的AO对象在作用域中，让我们来瞅一瞅：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]  
虽然b的AO中啥也没有，但是它抓住了fn的AO和全局的GO对象，因为这些都在b的作用域中！然后我们开始执行b函数的代码，++a，因为b函数没有定义a，所以从作用域链网上找，找到了fn的AO中的a，然后对其进行操作。fn函数内部的a不会被释放。这就是最简单的闭包。  
闭包的概念就是一个函数中的内部函数被保存到了外部执行(内部函数还可以操作外部函数里的变量)

## 总结 ##

函数内部的变量可以被外部访问
        原理：通过作用域链完成的
        优点:1. 函数外部可以访问函数内部变量  2.防止变量被全局污染
        弊端：1.每次执行foo() 产生新的闭包，foo 函数内部的a不会被释放
        注意：每次产生的闭包之间相互独立 不受影响！

[20191204204922119.png]: https://img-blog.csdnimg.cn/20191204204922119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204205546733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191204211252944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70