JS闭包以及作用域初探

Posted 2020-11-02

　　　　以前看到的一个问题，很有意思：

    for (var i = 0; i < 5; i++) {
        setTimeout(function () {
            console.log(i);
        },500);
    }

　　　　循环5个setTimeout， 你会发现console.log的值都是5. 为什么呢，因为setTimeout是个异步函数，for在执行的时候会直接跳过，很明显这里是先执行了循环，setTimeout才开始执行，这个时候变量i 的值已经是5了，所以接连输出5个5.

　　　　但是我们不需要这样的结果，我们希望每个i在每个setTimeout的值跟随for循环来变，于是：

    for (var i = 0; i < 5; i++) {
        (function (i) {
            setTimeout(function () {
                console.log(i);
            }, 500);
        })(i);
    }

　　　　我们使用了一个闭包的匿名函数，每次循环的时候将变量i传进这个“封闭”着的函数里，这样setTimeout里面使用到的i的每个值都不一样，用我的理解就是，闭包使 i 独立了，外部依次传入5个不同的I，这个5个i彼此隔离，在自己的setTimeout里被使用。

　　　　关于闭包是什么，网上有很多解答， http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html  这个人讲得挺细的了

　　　　

　　　　

---

　　　　回到主题，上面为了是每个setTimeout里输出的值都是当前循环里的值，使用到了闭包，但是还有一种简洁的写法：

　　　　

    for (let i = 0; i < 5; i++) {
        setTimeout(function () {
            console.log(i);
        }, 500);
    }

　　　　使用let以后i的作用域就变成块级作用域了，setTimeout里的每个i都是当前循环里的i，所以最后得到的结果就不是同一个了，而是我们想要的结果！