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

发布时间:2019-08-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了由一道题引申出的事件循环、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作为参数传入函数。

引申出其他

仔细查阅规范可知,异步任务可分为 taskmicrotask 两类,不同的API注册的异步任务会依次进入自身对应的队列中,然后等待 Event Loop 将它们依次压入执行栈中执行。

(macro)task主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

microtask主要包含:Promise.then、MutaionObserver、PRocess.nextTick(Node.js 环境)

附上一幅图更清楚的了解一下

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

每一次Event Loop触发时:

  1. 执行完主执行线程中的任务。
  2. 取出micro-task中任务执行直到清空。
  3. 取出macro-task中一个任务执行。
  4. 取出micro-task中任务执行直到清空。
  5. 重复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);
});
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).thenPROMISE.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 start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

letvarconst用法和区别

总结一下阮老师的介绍。

  • ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。而var全局有效。
  • var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefinedlet命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
  • 在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
  • let不允许在相同作用域内,重复声明同一个变量。
  • const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。const其他用法和let相同。

与这题关联

上面代码中,变量ivar命令声明的,在全局范围内都有效,所以全局只有一个变量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);
  }
}

参考

阮老师es6

What's the difference between resolve(thenable) and resolve('non-thenable-object')?

Daily-Interview-Question

并发模型与事件循环

脚本宝典总结

以上是脚本宝典为你收集整理的由一道题引申出的事件循环、letvar用法、iife、块级作用域全部内容,希望文章能够帮你解决由一道题引申出的事件循环、letvar用法、iife、块级作用域所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。