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

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)

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

分析：

// 题二：
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

分析： 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) 【作用域链，形参 x = 6(会被下面修改++) ， 代码执行： return BBBFFF000 】 BBBFFF000 => [[scope]] : EC(FN1)   【 形参 y  “console.log(y+(++x))” 】 f(7) => BBBFFF000(7)  => EC(F1) 【作用域链， 形参 y=7，代码执行：console.log(y+(++x) 】AAAFFF000中的x被修改为了7，不会释放，所以结果为14

f(8)(9) => AAAFFF(8) => EC(FN2)  【作用域链，形参 x = 8(被下文变9) ， 代码执行： return BBBFFF111 】 BBBFFF111 => [[scope]] : EC(FN1)   【 形参 y  “console.log(y+(++x))” 】 AAAFFF(8) 临时不被释放，BBBFFF111(9)  => 形成EC(NA) =>  【作用域链，形参 y = 9 ， 代码执行： return BBBFFF111 】，没人用BBBFFF111了会被释放，所以结果为18

f(10) => BBBFFF000(10) =>EC(F2) => 【作用域链， 形参 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"

分析

4、JS中的内存优化

• 栈内存【执行上下文】 栈内存的优化：一般情况下，函数执行完，所形成的上下文会被出栈释放掉， 特殊情况 1、当前上下文中的某些内容被上下文以外的事物占用了，此时不能出栈释放 2、全局上下文，加载页面创建的，也只有页面关闭才会被释放掉

• 堆内存 浏览器的垃圾回收机制 1、引用计数（IE为主、某些情况下不能正常计数，导致不能被释放——内存泄漏） 2、检测引用（占用）（谷歌为主）， 浏览器在空闲时会一次检测所有的堆内存，把没有被任何事物占用的内存释放掉，以此优化内存 手动释放内存一般就是解除占用，解除指针的指向，一般赋值为null (空对象指针)

• 闭包的使用 大量使用闭包会造成性能损耗，但是闭包的保护和保存，我们还是需要的，所以开发中要合理使用闭包，使用后需要解除占用

• 闭包的应用 1、实战用途 2、 高阶编程：柯里化函数、惰性函数、compose函数 3、 自己封装插件组件的时候， 4、  源码分析JQ/Lodash/React（Redux/高阶组件/HOOKS）

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

完成一下点击按钮，完成换肤的效果，循环点击获取当前索引的五种方式 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）
         *  作用域链          *  形参赋值 i=0
         */
        // btn[0].onclick = AAAFFF000([[scope]]:EC(AN))
        btns[i].onclick = function () {
          /**
           * 私有上下文 EC(EV)
           *   作用域链：             *   这里的再遇到的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];
      }
    };