for循环下面使用javascript各种场景

前言

本文demo均参考《你不知道javscript上卷 5.4循环与闭包》

场景一

    for(var i=0;i<=5;i++) {
        console.log(i); // 0,1,2,3,4,5
    }
    console.log(i); // 6

原因：var定义的变量如果外层没有函数，默认就是全局变量，for循环内部console.log遵循IIFE(立即执行表达式)规则，会立马打印每一次循环对应的值，而for循环外部的console.log打印的是全局变量i, 也就是i跳出循环的值6。

场景二

  for(var i=0;i<=5;i++) {
        setTimeout(() => {
            console.log(i); // 6,6,6,6,6,6
        }, 1000)
    }

原因：setTimeout是一个异步任务，在事件循环机制中，它是一个宏任务，for循环也是一个（同步）宏任务，(执行顺序：for循环 > setTimeout), 所以setTimeout需要等到所有for循环都执行完毕后才能执行，for循环需要i跳出循环才能终止结束，所以i=6; 再执行setTimout内部方法，i每次都是6。

场景三

 for (var i=0;i<=5;i++) {
        (function () {
            setTimeout(() => {
                console.log(i); // 6,6,6,6,6,6
            }, 1000)
        }())
    }

原因：for循环内部虽然套了一层立即执行函数，虽然表面上函数自身有作用域，但是并没有对i变量进行存储，等到for循环终止后，才能执行setTimeout方法，此时i=6; 而立即执行函数由于本身未对i变量进行存储，它就会去外层找i变量；所以setTimeout打印的结果还是6。

场景四

 for (var i=0;i<=5;i++) {
        (function(j){
            setTimeout(() => {
                console.log(j); // 0,1,2,3,4,5
            }, 1000)
        })(i)
    }

原因：for循环内部套了一层立即执行函数，并且将每一次循环i变量当做参数传到函数内部，利用函数作用域的特性，会对每一次i变量进行了存储，所以每一次for循环，函数作用域j变量值都不一样，等到for循环结束后，开始执行setTimeout，它会去从上层函数作用域去找j变量。所以打印的结果是0,1,2,3,4,5。

场景五

 for (var i=0;i<=5;i++) {
        (function(){
            var j = i;
            setTimeout(() => {
                console.log(j);// 0,1,2,3,4,5
            }, 1000)
        })()
    }   

原因：for循环内部套了一层立即执行函数，并且将每一次循环i变量当做参数传到函数内部并进行赋值给j变量，所以每一次for循环，函数作用域j变量值都不一样，等到for循环结束后，开始执行setTimeout，它会去从上层函数作用域去找j变量。所以打印的结果是0,1,2,3,4,5。

场景六

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

原因：let会创建一个块级作用域，也称为私有作用域，每一次for循环都给i变量进行了存储，for循环执行结束，setTimeout每一次获取i的值都会从let这个块级作用域获取i变量值，所以打印的结果是0,1,2,3,4,5。

场景七

  for(var i=0;i<=5;i++) {
        let j = i;
        setTimeout(() => {
            console.log(j);
        }, 1000)
    }

原因：let声明，可以用来劫持块级作用域，参考 5.4循环与闭包-重返块作用域