JS-闭包

一、闭包简介
1、函数内部的函数可以生成闭包
2、闭包的应用：需要多个内部变量值
3、闭包弊端
闭包：会倒致函数运行结束后，局部变量空间不会被释放。从而造成内存泄漏。

二、对象、函数
1、对象引用（引用地址）：数组里的两个a是同一个a

var a = {name:"张三",age:18};
var arr = [];
arr.push(a);
arr.push(a);
// a 发生变化后，数组内部也会改变
a.name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]); //true

结果： 屏幕快照 2017-10-10 下午7.59.57.png

2、函数 t 运行两次，每运行一次，空间就被收回，是两个不同的a。其值被保存在 arr 中

var arr = [];
function t(){
    var a = {name:"张三", age:18};
    arr.push(a);
}
t();
t();
arr[0].name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]);  //false

结果： 屏幕快照 2017-10-10 下午8.10.10.png

三、闭包
1、执行同一次函数 ，变量 a 相同

var arr = [];
function t(){
    var a = {name:"张三", age:18};
    arr.push(a);
    arr.push(a);
}
t();
arr[0].name = "李四";
console.log(arr);
console.log(arr[0] == arr[1]);  //true

屏幕快照 2017-10-10 下午8.17.56.png

2、外部函数执行两次，f1 与 f2 中的a 不是同一个a

  function fna(){
        var a = 10;
        return function(){
            console.log(++a);
        }
    }
    var f1 = fna();
    var f2 = fna();
    console.log(f1 == f2);  //执行两次函数，false

    // 闭包：调用f1生成的都是一个a，会保存a的值，所以a会自增。
    f1();
    f1();
    f1();
    f1();
    f1();
    // 调用f2 生成的不是一个a，值为 11
    f2();

屏幕快照 2017-10-10 下午8.21.18.png

3、全局变量 i，f1、f2 中的i为同一个i

    var i = 100;
    function fna(){
        return function(){
            console.log(++i);
        }
    }
    var f1 = fna();
    var f2 = fna();
    f1();
    f1();
    f1();
    f1();
    f1();
    f2();

屏幕快照 2017-10-10 下午8.27.26.png

4、

// 外部函数运行一次，内部的函数形成闭包，会保存a的值，in1与in2是指一个a
// 只生成一个局部变量和参数
    function fn(){
        var a = 10;
        function in1(){
            console.log(++a);
        }
        function in2(){
            console.log(++a);
        }
        return [in1, in2];
    }
    var arr = fn();
    var f1 = arr[0];
    var f2 = arr[1];
    f1();
    f1();
    f1();
    f1();
    f1();
    f2();

屏幕快照 2017-10-10 下午8.29.53.png

5、

// 传参,外层函数只调用一次，内部num指同一个
    function fn(num){
        var a = 10;
        function in1(){
            console.log(++num);
        }
        function in2(){
            console.log(++num);
        }
        return [in1, in2];
    }
    var arr = fn(100);
    var f1 = arr[0];
    var f2 = arr[1];
    f1();
    f1();
    f1();
    f1();
    f1();
    f2();

屏幕快照 2017-10-10 下午9.13.48.png

四、闭包的应用
原来写点击div打印对应下标

var itemS = document.getElementsByClassName('item');
for(var i=0;i<itemS.length;i++){
    // 自定义属性，保存div对应下标值
    itemS[i].index = i;
    itemS[i].onclick = function(){
        // 时间函数，指向Windows，在未调用前，将指向保存在变量 _this中
        var _this = this;
        setTimeout(function(){
            console.log(_this.index);
        },1000);
    }
}

可以利用闭包解决：利用闭包保存的是一个局部变量/参数
1、函数包裹，并调用（利用闭包保存的是一个局部变量）

for(var i=0;i<itemS.length;i++){
        function t(){
            var a = i;
            itemS[i].onclick = function(){  //点击时，闭包会保存a的值 
                setTimeout(function(){      //没有用到this、的window指向。可直接使用。
                    console.log(a);
                },1000);
            }
        }
        t();
    }

2、解决方法：匿名函数自执行 包裹（利用闭包保存的是一个局部变量）

 (function(){})()

函数t里的点击方法会形成闭包。随着for循环运行10次，函数t也会运行10次。每次t运行时，都会有一个变量a。然后每一个闭包保存了函数t运行的时候的变量a。

 var itemS = document.getElementsByClassName('item');
 for(var i=0;i<itemS.length;i++){
    // 自定义属性，保存div对应下标值
    (function(){
        // 函数嵌套函数，形成闭包。a共有10个值，且空间不会被回收
        var a = i;
        itemS[i].onclick = function(){
            setTimeout(function(){
                console.log(a);
            },1000);
        }
    })()
}

3、利用闭包里保存的是一个参数

for(var i=0;i<itemS.length;i++){
        (function(i){                        //i舍去，为全局变量。i变量只能保存一个值，打印出来一直为9
            itemS[i].onclick = function(){   

                setTimeout(function(){
                    console.log(i);         // 
                },1000)
                
            }
        })(i);                              //i 舍去，不传参。结果为undefind。打印时会报错
    }