深度了解js闭包形成及其原理

红太狼 2023-06-16 07:52 32阅读 0赞

> 闭包

一说到这个问题，很多人第一印象就是函数里返回一个函数，就是闭包。闭包也是被大家广泛讨论的一个问题，但是很多人都是只知其然，不知其所以然。  
那么闭包到底是什么？我们放到后面来回答。

> 作用域与作用域链

##### 作用域 #####

// 案例1
     // 全局作用域 函数向上找
      var name= '帅哥';        
      function fn1(){ 
          console.log(name);
          // 会打印帅哥
       }
       fn1();
       
       // 案例2
       // 函数内部定义的变量是局部变量 外部访问不到
       function fn2(){ 
            var name1 = "小明";
        }
        // console.log(name1); 报错 name1未定义

这几行代码不是很难，大家都看得懂，案例一是全局变量（或称外层变量）函数内部是可以访问的，那么应该这么形容：**我能访问name，因为我具有作用域属性\[\[scopes\]\],里面有name属性**，而案例二是访问不到的，因为name1是局部变量。

#### 作用域链 ####

// 案例3
     function fn3(){ 
       var name2 = '木子';
        function fn4(){ 
            var name2 = '惠子';
            // console.log(name2); 惠子
        }
        fn4();
    }
    fn3();

看到以上案例，**函数包函数，一级一级就构成了作用域链条**，在fn4里如果未定义name2，然后去打印它，它会一级一级向上找，找到fn3里面的name2，然后输出’木子’。案例三上是新定义了name2，那么它会就近查找，找到’惠子’然后打印出来

> 为什么会出现闭包?

说一个我的面试经历吧，我去某大厂面试的时候，面试官问到这个问题，我当时第一反应就是js的闭包是对js函数作用域特性的一种利用，因为函数内定义的局部变量不能被外部直接获取，而函数却可以访问到其外部作用域的变量。  
所以我们可以在函数内部定义一个访问局部变量的方法并将之输出给外部。在函数销毁后，通过函数输出的方法访问局部变量成了唯一途径。

回答完之后自己觉得还是挺满意的，然而面试官面无表情。

我灵机一动 又补充道：  
通过闭包，我们可以避免全局污染，保护私密数据等等  
面试官表情都没动一下，来了一句：这些都不是我想听到的答案，能说的更底层一些么？

> 闭包形成原理

那么现在面试官肯定是问闭包形成原理了  
从谷歌的**v8引擎原理**(经典的js引擎)说起，它的工作机制:

简单来说，v8引擎的工作分两个阶段，一个是语法检查阶段，一个是运行阶段。

运行阶段又分预解析和执行两个阶段。  
在预解析阶段，先创建执行上下文，执行上下文包括变量对象、作用域链和this值。

**执行上下文**：当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。创建执行上下文后，会对变量对象的属性进行填充。所谓属性，就是var、function声明的标志符及函数形参名，至于属性对应的值：变量值为undefined，函数值为函数定义，形参值为实参，没有传入实参则为undefined。

**变量对象VO**： var声明的变量、function声明的函数，及当前函数的形参，执行上下文则是先预解析一次。

**作用域链**：当前变量对象+所有父级作用域 \[\[scope\]\]，作用域链其实就是一个变量对象的链，函数的变量对象称之为active object，简称AO。（函数创建后就有静态的\[\[scope\]\]属性，直到函数销毁）

**this值**：在进入执行上下文后不再改变，预解析阶段结束后，进入执行代码阶段，此时执行上下文有个Scope属性(区别于函数的\[\[scope\]\]属性)。Scope = 当前AO.concat(\[\[scope\]\])

js解析器逐行读取并执行代码，变量对象中的属性值可能因赋值语句而改变。当我们查询外部作用域的变量时，其实就是沿着作用域链，依次在这些变量对象里遍历标志符，直到最后的全局变量对象。

\[\[Scopes\]\] 作用域属性 作用域属性保存自身作用域变量对象和父级变量对象引用。因此，函数才能访问上级函数得变量 这样就形成了作用域链。

**我能访问到 windom的东西，就是因为作用域属性保存了它**

> 试着创建一个闭包

当我们调用一个闭包函数时(比如上面的getInnerDate函数)  
因为函数执行时，其上下文有个Scope属性，该属性作为一个作用域链包含有该函数被定义时所有外层的变量对象的引用，  
所以定义了闭包的函数虽然销毁了，但是其变量对象依然被绑定在函数inner上，保留在内存中。

看到下图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]  
Scopes上已经有了一个闭包，保存了a1这个变量，不会被销毁。  
Global：运行时和标准共同注入了一堆属性。

再看两个例子:

fn8段代码和之前的 fn7() 示例的效果完全一样。其中的不同 — 也是有意思的地方

内部函数 displayName() 在执行前，被外部函数返回。  
第一眼看上去，也许不能直观的看出这段代码能够正常运行。

在一些编程语言中，函数中的局部变量仅在函数的执行期间可用。一旦 fn8() 执行完毕，我们会认为 name3 变量将不能被访问。然而，因为代码运行得没问题，所以很显然在 JavaScript 中并不是这样的。

这个谜题的答案是，JavaScript中的函数会形成闭包。 闭包是由函数以及创建该函数的词法环境组合而成。

这个环境包含了这个闭包创建时所能访问的所有局部变量。在我们的例子中，myFn8 是执行 fn8 时创建的,displayName 函数实例的引用，而 displayName 实例仍可访问其词法作用域中的变量，即可以访问到 name3 。

由此，当 myFn8 被调用时，name3 仍可被访问，其值 name3 就被传递到console中。

> 闭包小案例二

function makeAdder(x) { 
      return function(y) { 
              return x + y;
          };
      }
    
      var add5 = makeAdder(5);
      var add10 = makeAdder(10);
      
      // console.log(add5(2)); // 7
      // console.log(add10(2)); // 12

在这个示例中，定义了 makeAdder(x) 函数，它接受一个参数 x ，并返回一个新的函数。返回的函数接受一个参数 y，并返回x+y的值。

从本质上讲，makeAdder 是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。

在上面的示例中，使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。  
add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。

这说明闭包是非常有用的，下一篇更新**闭包的实用性，应用场景**。

希望能帮到大家，如果错误，欢迎指正。  
转载请注明出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125173244789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70