js面试题:let和var配合定时器中使用

一、let和var的区别

//let和var的区别相信列位已经耳熟能详了,在这里不做过多陈述,在第二段将用到的会提及一下

二、在定时器中的表现

• var

	  for (var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log("定时器" + i);
            })
        }

		//5 * 定时器5

---

• let

	for (let i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log("定时器" + i);
            })
        }
         //定时器0
		 //定时器1
		 //定时器2
		 //定时器3
		 //定时器4

三、解析

(1)产生这种的原因有三个

• let声明带来的块级作用域
• for循环机制(重点)
• var的变量提升

(2) var命令做了什么

• var首先带来了变量提升,将i提升到全局变量,所以var命令实际上只执行了一次
  //在es6之前,js只有全局和局部作用域概念,局部作用也可以理解成函数作用域,所以此时在for循环用var声明的变量是全局变量
• 其次定时器是宏任务队列,for循环在这里相当于在Event Queue添加了五个事件
• 最后主线程任务执行结束后开始调用Event Queue中的事件,因为var带来的变量提升,此时全局只能有一个变量i,而i在for循环迭代到5,所以此时5个setTimeout事件中的i都指向了5

(3)let命令做了什么

• let命令不存在变量提升,所以在每次for循环执行中let都会执行一次
• let块级作用域锁区,所以当前的作用域内也只有一个i
• 所以每个setTimeout中的i值都指向了不同的值

(4)for命令做了什么

• for 循环机制决定了它每次循环都是不同的块级作用域(这里与let声明块级作用域吻合)
• 根据阮一峰的<>:JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。(实现了i初始化)

四、总结

简单点说,实现输出0 1 2 3 4的需求的原理就是利用了js中for循环机制和let的无变量提升和块级作用域

实际上 用 let 也能实现 var 同样的需求(代码如下)

		let i = 0;
        for (; i < 5; i++) {
            setTimeout(function () {
                console.log("定时器" + i);
            })
        }
		//5 * 定时器5
		//这里能实现的原因就是手动实现了一个变量提升
		//此时在setTimeout事件中都是对i的引用而不是赋予一个新值