JavaScript学习（5）——插播闭包

        好记性不如烂笔头，在写作的过程中自己消化吸收，所以写下这个JavaScript学习系列文章。文章中的文字都是自己理解的内容，各位酌情观看。

        接上节作用域，插播一个闭包

        在《你不知道的JavaScript——上》中看到一个非常常见的题目，但是之前一直都是迷迷糊糊，这里讲的更透彻、更方便理解。上代码

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}

        讲闭包概念的时候，这段代码是不少见了，答案我都记下了。可是在深入一些，要怎么改，改的思路是什么就有点模模糊糊了。好，这里的答案就是全部输入都是6；

        我觉得要理解这个结果还需要一些js的事件循环的初步认识。js是个单线程语言，代码一般都是从上往下依次执行的（上一章节提到编译阶段存在变量提升，不是严格的依次），当遇到setTimeout的时候会把这个任务放到宏任务队列中（不需要太多理解，就是排队稍后执行），主程序走的同步任务。因为这里同步任务就是构建了几个 setTimeout...，所以代码就简化成这样了

for (var i=1; i<=5; i++) {
    setTimeout(...);
}
//执行完之后 排队的setTimeout就可以执行了
 setTimeout( function timer() {
        console.log( i );
    }, i*1000 );

        所以到setTimeout执行的时候，for循环已经走完了，i变量已经自增到了6。setTimeout里面的代码打印i的时候使用的全局变量i，所以打印出来的结果就是5个6。怎么改成先要的1 2 3 4 5这种结果呢？书中给了比较详细的思路过程：

        首先确定了导致输出6的原因是因为引用了同一个i。要想得到想要的效果，就要构建闭包作用域。而闭包，当函数可以记住并访问所在的词法作用域时，就产生了闭包。那我们创建一个立即执行函数来创建作用域。

for (var i=1; i<=5; i++) {
    (function() {
        setTimeout( function timer() {
            console.log( i );
        }, i*1000 );
    })();
}

        这样就可以了吗？

        我们现在显然拥有更多的词法作用域了。每个延迟函数都会将立即执行函数在每次迭代中创建的作用域封闭起来。 如果作用域是空的，那么仅仅将它们进行封闭是不够的。引用的i还是那个全局作用域的i，我们需要有自己的变量将i存储下来。改进如下：

for (var i=1; i<=5; i++) {
    (function() {
        var j = i;
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })();
}

        这样就可以了。更进一步：

for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })( i );
}

更高级：

        我们使用 IIFE（立即执行函数） 在每次迭代时都创建一个新的作用 域。换句话说，每次迭代我们都需要一个块作用域。第 3 章介绍了 let 声明，可以用来劫 持块作用域，并且在这个块作用域中声明一个变量。

本质上这是将一个块转换成一个可以被关闭的作用域。因此，下面这些看起来很酷的代码 就可以正常运行了：

for (var i=1; i<=5; i++) {
    let j = i; // 是的，闭包的块作用域！
    setTimeout( function timer() {
        console.log( j );
    }, j*1000 );
}

但是，这还不是全部！（我用 Bob Barker 6 的声音说道）for 循环头部的 let 声明还会有一 个特殊的行为。这个行为指出变量在循环过程中不止被声明一次，每次迭代都会声明。随 后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}

很酷是吧？块作用域和闭包联手便可天下无敌。不知道你是什么情况，反正这个功能让我 成为了一名快乐的 JavaScript 程序员。

         这段这么长的引用是我对这里理解的不够透彻，所以先把原文摘录下来。然后我写下我的理解：

        块作用域就是{}，而let用于块作用域。所以上面引用的第一段代码就可以逐步解析为

var i=1;
{
let j = i; //块级声明
setTimeout(...,j);//块级变量引用
}
i++;
{
let j = i; //块级声明
setTimeout(...,j);//块级变量引用
}
i++;
.......
//括号和括号之间都是相对独立的块级作用域，因此互不想通，即便用的变量的名称看起来是一样的

//对比————如果是之前的var 全局作用域，那么就变成了
var i=1;
{
setTimeout(...,i);
}
i++;
{
setTimeout(...,i);
}
i++;
.......
//自然就引用的同一个全局变量i

        这样理解就再也不会迷糊了。第二段代码说的无非就是在for的结构体中，let变量也是每个块{}中都会重新定义一下，跟上面的代码结构类似。（感谢自己写这篇博文，自己的理解更深刻了~~）

---

        还介绍一篇很深刻的文章《破解前端面试（80% 应聘者不及格系列）：从闭包说起》，对ES6、和ES7比较熟悉的也可以看看。