JS进阶（三）闭包，作用域链，垃圾回收，内存泄露

素颜马尾好姑娘i 2023-02-25 10:06 29阅读 0赞

# 闭包，作用域链，垃圾回收，内存泄露 #

### 1、函数创建 ###

创建函数  
1、开辟一个堆内存(16进制的内存地址)  
2、声明当前函数的作用域（再哪个上下文创建的，它的作用域就是谁）  
3、把函数体内的代码当作字符串存储在堆内存当中(所以不执行没有意义)  
4、把函数的堆内存地址类似对象一样放到栈中供对象调用  
执行函数  
1、会形成一个全新的私有上下文(目的是供函数中的代码执行)，然后进栈执行  
2、在私有上下文中有一个存放私有变量的变量对象 AO（xx）  
3、在代码执行之前要做的事情  
\- 初始化它的作用域链<自己的上下文，函数的作用域>  
\- 初始化this (箭头函数没有this)  
\- 初始化Arguments实参集合(箭头函数没有)  
\- 形参赋值(形参变量是函数的私有变量，需要存储在AO中的)  
\- 变量提升(在私有上下文中声明的变量都是私有变量)  
4、代码执行（把之前在函数中存储的字符串，拿过来在上下文中一次执行）  
作用域链查找机制：在代码执行过程中，遇到一个变量，我们首先看一下是否为自己的私有变量，如果是，接下来的操作都是私有的和外界没有直接联系，如果不是私有的，那么按scope-chain，向上级上下文中查找（如果是上级私有的，接下来的操作都是操作上级的变量，。。。一直找，找到EC(G)为止）  
5、根据实际情况确定当前上下文是否出栈释放  
6、为了保证栈内存的大小，内存优化，一般情况下，如果当前函数执行产生的上下文在进栈且代码执行完成后，会把这次上下文移除栈（上下文释放后，之前上下文中存储的私有变量等信息也就跟着释放了）， 全局上下文是在打开页面生成的，只有在页面关闭的时候才能释放掉。 特殊情况：只要上下文中的某些内容被上下文以外的东西占用，那么当前上下文是不会释放的(上下文中存储的变量等信息也保留下来了)  
函数第二次执行，会形成一个全新的私有上下文，把之前做过的事，原封不动的在执行一遍，此时形成的上下文和上一次形成的上下文之间没有必要联系。

var x = [12,23];
     	function fn(y) { 
     	   y[0] = 100;
     	   y = [100];
     	   y[1] = 200;
     	   console.log(y)
     	}
     	fn(x);
     	console.log(x)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

### 2、闭包作用域 ###

闭包： 函数运行时产生的一种机制，函数执行会形成一个全新的私有上下文，可以保护里面的私有变量和外界互不干扰（保护机制），但是大家普遍认为的闭包，认为当前上下文不能被出栈释放，这样私有变量及它的值不会被释放掉（保存机制）

作用： 保护和保存 ， 保护里面的私有变量不被干扰，保存私有变量不被释放

## 3、经典面试题分析 ##

// 题一
    let x =1;
    function A(y){ 
       let x = 2;
       function B(z){ 
          console.log(x + y +z)
       }
       return B;
    }
    let C = A(2)
    C(3) 
    // 7

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 1]

> 分析：

// 题二：
    let x = 5;
    function fn(x){ 
       return function(y){ 
          console.log(y+(++x))  
       }
    }
    let f = fn(6)
    f(7)
    fn(8)(9) 
    f(10) 
    console.log(x); 
    // 14、18、18、5

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 2]

> 分析：  
> i ++ 和 ++i 的区别 i ++ 是先运算在加一，++i 是先加一在运算  
> 5+（++i）
> 
> EC(G)——VO(G) => 【 let x = 5 ; fn=>AAAFFF000 , f = fn(6) 执行fn 返回 ，所以 f => BBBFFF000；】  
> AAAFFF000 => \[\[scope\]\] : EC(G) 【 形参 x “return function(y)\{console.log(y+(++x)) \}” 】  
> fn(6) => AAAFFF000(6) => EC(FN1) 【作用域链<EC(FN1).EC(G)>，形参 x = 6(会被下面修改++) ， 代码执行： return BBBFFF000 】  
> BBBFFF000 => \[\[scope\]\] : EC(FN1) 【 形参 y “console.log(y+(++x))” 】  
> f(7) => BBBFFF000(7) => EC(F1) 【作用域链<EC(F1).EC(FN1)>， 形参 y=7，代码执行：console.log(y+(++x) 】AAAFFF000中的x被修改为了7，不会释放，所以结果为14
> 
> f(8)(9) => AAAFFF(8) => EC(FN2) 【作用域链<EC(FN1).EC(G)>，形参 x = 8(被下文变9) ， 代码执行： return BBBFFF111 】  
> BBBFFF111 => \[\[scope\]\] : EC(FN1) 【 形参 y “console.log(y+(++x))” 】  
> AAAFFF(8) 临时不被释放，BBBFFF111(9) => 形成EC(NA) => 【作用域链<EC(NA).EC(FN2)>，形参 y = 9 ， 代码执行： return BBBFFF111 】，没人用BBBFFF111了会被释放，所以结果为18
> 
> f(10) => BBBFFF000(10) =>EC(F2) => 【作用域链<EC(F2).EC(FN1)>， 形参 y=10，代码执行：10+ EC(FN1)中的x变为了++7】结果为18
> 
> 全局上下文中的x还是5

// 题三：
    let a = 0,
        b = 0;
    function A(a){ 
          A = function(b){ 
             alert(a+b++)
         };
         alert(a++)
     }
     A(1);  // 1
     A(2);  // 4
     // "1" ， "4"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 3]

> 分析

### 4、JS中的内存优化 ###

*  **栈内存【执行上下文】**  
    栈内存的优化：一般情况下，函数执行完，所形成的上下文会被出栈释放掉，  
    特殊情况  
    1、当前上下文中的某些内容被上下文以外的事物占用了，此时不能出栈释放  
    2、全局上下文，加载页面创建的，也只有页面关闭才会被释放掉
 *  **堆内存**  
    浏览器的垃圾回收机制  
    1、引用计数（IE为主、某些情况下不能正常计数，导致不能被释放——内存泄漏）  
    2、检测引用（占用）（谷歌为主）， 浏览器在空闲时会一次检测所有的堆内存，把没有被任何事物占用的内存释放掉，以此优化内存  
    手动释放内存一般就是解除占用，解除指针的指向，一般赋值为null (空对象指针)
 *  **闭包的使用**  
    大量使用闭包会造成性能损耗，但是闭包的保护和保存，我们还是需要的，所以开发中要合理使用闭包，使用后需要解除占用
 *  **闭包的应用**  
    1、实战用途  
    2、 高阶编程：柯里化函数、惰性函数、compose函数  
    3、 自己封装插件组件的时候，  
    4、 源码分析JQ/Lodash/React（Redux/高阶组件/HOOKS）

### 5、闭包在实际中应用的场景 ###

完成一下点击按钮，完成换肤的效果，循环点击获取当前索引的五种方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 4]  
html文件

##### 解决方式一 #####

/** * 在ES6之前只有全局上下文和私有上下文 * EC(G) arr ... , btns * 循环中给每个按钮都添加了点击事件行为，但是都没有执行，循环结束时 i=5，此时 * 当点击按钮执行函数的时候，形成私有上下文，scope[[EC(G)]]，没有形参赋值，代码执行时 i 不是自己的私有变量，所以找全局i * 解决方式1: 用函数包一层， */
        let btns = document.getElementsByTagName("button");
        let arr = ["red", "green", "blue", "black", "pink"];
        for (var i = 0; i < btns.length; i++) { 
          // 子执行函数形成一个私有上下文，
          (function (i) { 
            /** * EC（AN） * 作用域链 <EC(AN),EC(G)> * 形参赋值 i=0 */
            // btn[0].onclick = AAAFFF000([[scope]]:EC(AN))
            btns[i].onclick = function () { 
              /** * 私有上下文 EC(EV) * 作用域链： <EC(EV)， EC(AN)> * 这里的再遇到的i，不再是全局的i，而是上级作用域中EC(AN)的闭包中保存的i */
              var color = arr[i];
              document.body.style.backgroundColor = color;
            };
          })(i); // 把每一轮的实参I传给私有上下文中的形参i，第一轮传递的是0
        }

##### 解决方式二 #####

/** * 解决方式2: 用函数包一层 */
        let btns = document.getElementsByTagName("button");
        let arr = ["red", "green", "blue", "black", "pink"];
        for (var i = 0; i < btns.length; i++) { 
          btns[i].onclick = (function (i) { 
            return function () { 
              var color = arr[i];
              document.body.style.backgroundColor = color;
            };
          })(i);
        }

##### 解决方式三 #####

/** * 解决方式3: 用let， 类似于闭包的机制 * let 的特点 * 在ES6中基于let、const创建的函数，如果出现在非函数和对象的大括号当中，大括号里包裹的是一个全新的作用域 * ES5以前没有块级作用域的概念，所以除函数外，都是全局作用域 * ES6产生块级作用域，形成私有作用域 */
    
        // 每一轮都会形成一个私有的作用域，并且又一个私有变量i，分别存储每一轮的索引
        // 循环5轮，会形成6个作用域(加一个for循环的父作用域) —— 也不是全局的
        // let的块级作用域是浏览器底层自己实现的，比我们实现的闭包要好一些
        let btns = document.getElementsByTagName("button");
        let arr = ["red", "green", "blue", "black", "pink"];
        for (let i = 0; i < btns.length; i++) { 
          btns[i].onclick = function () { 
            var color = arr[i];
            document.body.style.backgroundColor = color;
          };
        }

##### 解决方式四 #####

/** * 解决方式4: 用let， 类似于闭包的机制 * 真实项目中遇到循环事件绑定的，我们最好告别闭包机制，包括let，ES6 */
        let btns = document.getElementsByTagName("button");
        let arr = ["red", "green", "blue", "black", "pink"];
        for (var i = 0; i < btns.length; i++) { 
          btns[i].myIndex = i;
          btns[i].onclick = function () { 
            // => this 为当前操作的按钮
            var color = arr[this.myIndex];
            document.body.style.backgroundColor = color;
          };
        }

##### 解决方式五 #####

/** * 解决方式4: 最好的方式 —— 利用事件委托和target事件源(性能最好) * 在结构上就存储元素索引 */
        let btns = document.getElementsByTagName("button");
        let arr = ["red", "green", "blue", "black", "pink"];
        document.body.onclick = function (ev) { 
          let target = ev.target,
            targetName = target.tagName;
          // 当前点了按钮，target事件源就是这个按钮
          if (targetName === "BUTTON") { 
            var index = target.getAttribute("index");
            this.style.backgroundColor = arr[index];
          }
        };

## 6、写在最后 ##

欢迎访问我的博客[rockshang.com][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: /images/20230209/976ce1c25cde4ba5ab42904ad1dae9ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/6b59c4940f0047639483df2ebc11a642.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/d6070de60b814a98ab5beb6a94694bb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/c6c1cf33fbf5431d87c231ef9f3ae7bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/c4cfee4ff5f445eb9ef9d50439fa2d03.png
[rockshang.com]: https://s2265681.github.io/