由一道题引申出的事件循环、letvar用法、iife、块级作用域

没有错，这道题就是：for (var i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000)} // 10 10 10 10 …为什么这里会出现10次10，而不是我们预期的0-9呢？我们要如何修改达到预期效果呢？运行时&&事件循环首先我们得理解setTimeout中函数的执行时机，这里就要讲到一个运行时的概念。栈函数调用形成了一个栈帧。function foo(b) { var a = 10; return a + b + 11;}function bar(x) { var y = 3; return foo(x * y);}console.log(bar(7)); // 返回 42当调用 bar 时，创建了第一个帧 ，帧中包含了 bar 的参数和局部变量。当 bar 调用 foo时，第二个帧就被创建，并被压到第一个帧之上，帧中包含了 foo 的参数和局部变量。当 foo返回时，最上层的帧就被弹出栈（剩下 bar 函数的调用帧 ）。当 bar 返回的时候，栈就空了。堆对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。队列一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。在事件循环(Event Loop)期间的某个时刻，运行时从最先进入队列的消息开始处理队列中的消息。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。与这题的关联这里setTimeout会等到当前队列执行完了之后再执行，即for循环结束后执行，而这个时候i的值已经是10了，所以会打印出来10个10这样的结果。要是想得到预期效果，简单的删除setTimeout也是可行的。当然也可以这样改setTimeout(console.log, 1000, i);将i作为参数传入函数。引申出其他仔细查阅规范可知，异步任务可分为 task 和 microtask 两类，不同的API注册的异步任务会依次进入自身对应的队列中，然后等待 Event Loop 将它们依次压入执行栈中执行。(macro)task主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)附上一幅图更清楚的了解一下每一次Event Loop触发时：执行完主执行线程中的任务。取出micro-task中任务执行直到清空。取出macro-task中一个任务执行。取出micro-task中任务执行直到清空。重复3和4。其实promise的then和catch才是microtask，本身的内部代码不是。ps: 再额外附上一道题new Promise(resolve => { resolve(1); Promise.resolve().then(() => console.log(2)); console.log(4)}).then(t => console.log(t));console.log(3);这道题比较基础，答案为4321。先执行同步任务，打印出43，然后分析微任务，2先入任务队列先执行，再打印出1。这里还有几种变种，结果类似。let promise1 = new Promise(resolve => { resolve(2);});new Promise(resolve => { resolve(1); Promise.resolve(2).then(v => console.log(v)); //Promise.resolve(Promise.resolve(2)).then(v => console.log(v)); //Promise.resolve(promise1).then(v => console.log(v)); //new Promise(resolve=>{resolve(2)}).then(v => console.log(v)); console.log(4)}).then(t => console.log(t));console.log(3);不过要值得注意的是一下两种情况：let thenable = { then: function(resolve, reject) { resolve(2); }};new Promise(resolve => { resolve(1); new Promise(resolve => { resolve(promise1); }).then(v => { console.log(v); }); // Promise.resolve(thenable).then(v => { // console.log(v); // }); console.log(4);}).then(t => console.log(t));console.log(3);let promise1 = new Promise(resolve => { resolve(thenable);});let promise1 = new Promise(resolve => { resolve(thenable);});new Promise(resolve => { resolve(1); Promise.resolve(promise1).then(v => { console.log(v); }); // new Promise(resolve => { // resolve(promise1); // }).then(v => { // console.log(v); // }); console.log(4);}).then(t => console.log(t));console.log(3);结果为4312。有人可能会说阮老师这篇文章里提过Promise.resolve(‘foo’)// 等价于new Promise(resolve => resolve(‘foo’))那为什么这两个的结果不一样呢？请注意这里resolve的前提条件是参数是一个原始值，或者是一个不具有then方法的对象，而其他情况是怎样的呢，stackoverflow上这个问题分析的比较透彻，我这里简单的总结一下。这里的RESOLVE(‘xxx’)是new Promise(resolve=>resolve(‘xxx’))简写Promise.resolve(’nonThenable’) 和 RESOLVE(’nonThenable’)类似；Promise.resolve(thenable) 和 RESOLVE(thenable)类似；Promise.resolve(promise)要根据promise对象的resolve来区分，不为thenable的话情况和Promise.resolve(’nonThenable’)相似；RESOLVE(thenable) 和 RESOLVE(promise) 可以理解为 new Promise((resolve, reject) => { Promise.resolve().then(() => { thenable.then(resolve) }) }) 也就是说可以理解为Promise.resolve(thenable)会在这一次的Event Loop中立即执行thenable对象的then方法，然后将外部的then调入下一次循环中执行。再形象一点理解，可以理解为RESOLVE(thenable).then和PROMISE.then.then的语法类似。再来一道略微复杂一点的题加深印象async function async1() { console.log(‘async1 start’); await async2(); console.log(‘async1 end’);}async function async2() { console.log(‘async2’);}console.log(‘script start’);setTimeout(function() { console.log(‘setTimeout’);}, 0)async1();new Promise(function(resolve) { console.log(‘promise1’); resolve();}).then(function() { console.log(‘promise2’);});console.log(‘script end’);题目来源答案/script startasync1 startasync2promise1script endasync1 endpromise2setTimeout/let、var和const用法和区别总结一下阮老师的介绍。ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。而var全局有效。var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。let不允许在相同作用域内，重复声明同一个变量。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。const其他用法和let相同。与这题关联上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。要是想得到预期效果，可以简单的把var换成let。iife和块级作用域let实际上为 JavaScript 新增了块级作用域。function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5}上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。// IIFE 写法(function () { var tmp = …; …}());// 块级作用域写法{ let tmp = …; …}与这题的关联如果不用let，我们可以使用iife将setTimeout包裹，从而达到预期效果。for (var i = 0; i < 10; i++) { (i => setTimeout(() => { console.log(i); }, 1000))(i);}其他骚气方法for (var i = 0; i < 10; i++) { try { throw i; } catch (i) { setTimeout(() => { console.log(i); }, 1000); }}参考阮老师es6What’s the difference between resolve(thenable) and resolve(’non-thenable-object’)?Daily-Interview-Question并发模型与事件循环