38.循环索引同步：利用自执行函数，闭包

为什么要同步

• 因为不同步啊，和预期不一样，如何同步？同步的意思就是i=0，输出0，i=1，输出1

for(var i = 0; i < 3; i++){ // 0 1 2 3
        function test() {
            console.log(i); // 3
        }//注意，函数并没有调用执行！！！，只是创建函数而已
    }
    // console.log(i); // 3
    test();

• 注意，for循环里面函数并没有调用执行！！！，只是创建函数而已
• 默认情况下通过var定义的变量,只要不是定义在函数中都是全局变量，所以i是全局变量
• for执行三次，就是说会创建三个test函数（处于全局作用域中），而后创建的同名函数会覆盖先前创建的同名函数，那么当for执行完时，i为3【i是全局变量】，==只有一个test函数（其他被覆盖了），所以调用test函数时【顺序执行嘛，for已执行完，创建test函数时，在for里面并没有执行test】，i=3
• 每一个test函数都是属于window的， 这也是test();能执行的原因
• 和预期很不同：想i等于0，输出0，i=1，输出1

循环索引同步方案一

for(var i = 0; i < 3; i++){ // 0 1 2 3
        function test() {
            console.log(i); // 0 1 2
        }
        test();
    }
    等价于下面【立即执行函数】
       for(var i = 0; i < 3; i++){ // 0 1 2 3
        (function test() {
            console.log(i); // 0 1 2
        })();
    }
    
    又等价于下面
     for(var i = 0; i < 3; i++){ // 0 1 2 3
        // function test(index) { // var index = i;
        //     console.log(index); // 0 1 2
        // }
        // test(i);
        (function test(index) {
            console.log(index); // 0 1 2
        })(i);
    }

• 注意最后一种写法:

(function test(index) {
            console.log(index); // 0 1 2
        })

• 实质上，这玩意不太容易看懂，学名叫自执行函数（（立即调用的函数表达式）），有两种形式
  部分内容参考自浅谈自执行函数

// 方式一
    (function fun4(){
        console.log("fun4");
    }()); // "fun4"

• 因为在JavaScript语言中，()里面不能包含语句（只能是表达式），所以解析器在解析到function关键字的时候，会把它们当作function表达式，而不是正常的函数声明。

js中的表达式（expression）：js中的一个短语，js解释器会将其计算出一个结果。程序中的常量是最简单的一类表达式。联想，算数表达式，逻辑表达式都会返回一个结果。

• 既然解析器在解析到function关键字的时候，把它们当作function表达式，既然是表达式，那么也会返回一个结果，假设为一个地址值fn，那么就相当于下面那样了，

let fn=function fun4(){
        console.log("fun4");
    }

• 似曾相识有没有？加上后面的(),即fn()，这就调用了函数了，所以学名叫自执行函数（（立即调用的函数表达式））

    // 方式二
    (function fun5(){
        console.log("fun5");
    })();// "fun4"
    

• 写法上建议采用方式一（这是参考文的建议。但实际上，我个人觉得方式二比较常见）。（上面链接的原话）

循环索引同步练习（运用方案一）

let oBtns = document.querySelectorAll("button");
    for(var i = 0; i < oBtns.length; i++) {
        let btn = oBtns[i];
        (function test(index) { // var index = i;
            // console.log(index); // 0 1 2
            
 // 注意点: onclick对应的方法由于满足了闭包的条件,
 // 所以onclick对应的方法也是一个闭包
            btn.onclick = function () {
                console.log(index);
            }
        })(i);
    }

• 每定义一个函数，就开启一个作用域（作用域就一块内存，不同内存的变量互不干扰），那么for执行三次，就会定义了三个自执行函数的作用域，每一个作用域中有两块东西，一是index值和闭包onclick函数，如下图
  [站外图片上传中...(image-ef2abf-1559914641385)]
• 所以点击时，输出相应的值（==因为所处的内存不同==），达到了循环索引同步

循环索引同步方案二

• 为了引入这个方案，先看以下的代码

  var list = [];
    // 这里的i是全局变量
    for(var i = 0; i < 3; i++){ // 0 1 2 3
        var fn = function test() {
            console.log(i); // 3
        }
        list.push(fn);
    }
    // console.log(i);
    // console.log(list);
    list[0]();
    list[1]();
    list[2]();

• 三个函数输出都为3，因为i是全局变量。

方案二：用let定义索引

let list = [];
    // 这里的i是局部变量
    // 注意点: 由于i是局部变量, 所以每次执行完循环体都会重新定义一个i变量
    for(let i = 0; i < 3; i++){ // 0 1 2 3
        let fn = function test() {
            console.log(i); // 3
        }
        list.push(fn);
    }
    // console.log(i); // i is not defined
    // console.log(list);
    list[0]();
    list[1]();
    list[2]();

• 分别输出0，1，2，因为每次执行完循环体都会重新定义一个i变量（因为局部变量的生命周期在for的右边花括号就结束了），看下图。

[站外图片上传中...(image-9052fc-1559914641385)]

---

for(let i = 0; i < 3; i++){ // 0 1 2 3
        // 注意点: 在ES6中由于{}是块级作用域, 所以只要在块级作用域中定义了一个函数
        //         并且这个函数中用到了块级作用域中的数据, 那么这个函数就是闭包
        function test() {
            console.log(i); // 3
        }
    }
    test(); // 2
    

• test()是闭包，看起来是不是怪？以往函数嵌套函数，且用到了外部作用域的值才会是闭包，现在没有函数嵌套函数啊？其实函数嵌套函数，本质上定义了一个函数就是开启了一个作用域，函数嵌套了函数，也可以说是非全局的作用域嵌套了一个作用域，那么定义闭包的说，可以说成在某一个非全局作用域里面定义了一个函数而且这个函数用到了那个作用域的值，就是闭包，因为for的{}是块级作用域，而且在里面定义了一个函数test，且test用到了i，所以test也是一个闭包！~
• 为什么 test(); // 2输出2，因为其他test都被覆盖了，只剩最后一个，
• 为什么其他test函数会被覆盖？for的局部作用域和全局作用域，在for执行完三次循环，就销毁for的作用域，回收内存了，所以还剩下全局作用域，又因为闭包执行完后其作用域就不会被收回，所以三个test函数都暴露在全局作用域了，所以会被最后一个test函数覆盖其他函数
• 为什么说三个test函数都暴露在全局作用域了？？看下面的图片

[站外图片上传中...(image-cc159b-1559914641385)]

---

循环索引同步练习：方案二

    // 在ES6中
    // 1.for循环中通过let定义的变量是一个局部变量
    // 2.for循环中通过let定义的变量每次执行循环体都会重新定义一个新的
    //   也就是每个循环体都有一个属于自己的变量
    
    // 3.for循环中如果定义了函数, 这个函数用到了通过let定义的变量,
    // 那么这个函数是一个闭包
    for(let i = 0; i < 3; i++){
        function test() {
            console.log(i);
        }
    }

    let oBtns = document.querySelectorAll("button");
    for(let i = 0; i < oBtns.length; i++){
        let btn = oBtns[i];
        btn.onclick = function () {
            console.log(i);
        }
    }
    

• 页面三个按钮，点击按钮0，输出0，点击按钮1，输出1