关于前端:JS的执行还分是谁发起的

这一部分首先咱们考虑一下，如果咱们是浏览器或者 Node 的开发者，咱们该如何应用 JavaScript 引擎。

当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。

然而，执行 JavaScript 并非一锤子买卖，宿主环境当遇到一些事件时，会持续把一段代码传递给 JavaScript 引擎去执行，此外，咱们可能还会提供 API 给 JavaScript 引擎，比方 setTimeout 这样的 API，它会容许 JavaScript 在特定的机会执行。

所以，咱们首先应该造成一个理性的认知：一个 JavaScript 引擎会常驻于内存中，它期待着咱们（宿主）把 JavaScript 代码或者函数传递给它执行。

在 ES3 和更早的版本中，JavaScript 自身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码间接依次执行了，这个工作也就是宿主发动的工作。

然而，在 ES5 之后，JavaScript 引入了 Promise，这样，不须要浏览器的安顿，JavaScript 引擎自身也能够发动工作了。

因为咱们这里次要讲 JavaScript 语言，那么驳回 JSC 引擎的术语，咱们把宿主发动的工作称为宏观工作，把 JavaScript 引擎发动的工作称为宏观工作。

宏观和宏观工作

JavaScript 引擎期待宿主环境调配宏观工作，在操作系统中，通常期待的行为都是一个事件循环，所以在 Node 术语中，也会把这个局部称为事件循环。

不过，术语自身并非咱们须要重点探讨的内容，咱们在这里把重点放在事件循环的原理上。在底层的 C/C++ 代码中，这个事件循环是一个跑在独立线程中的循环，咱们用伪代码来示意，大略是这样的：

while(TRUE) {r = wait();
    execute(r);}

咱们能够看到，整个循环做的事件基本上就是重复“期待 – 执行”。当然，理论的代码中并没有这么简略，还有要判断循环是否完结、宏观工作队列等逻辑，这里为了不便你了解，我就把这些都省略掉了。这里每次的执行过程，其实都是一个宏观工作。咱们能够大略了解：宏观工作的队列就相当于事件循环。在宏观工作中，JavaScript 的 Promise 还会产生异步代码，JavaScript 必须保障这些异步代码在一个宏观工作中实现，因而，每个宏观工作中又蕴含了一个宏观工作队列：

有了宏观工作和宏观工作机制，咱们就能够实现 JavaScript 引擎级和宿主级的工作了，例如：Promise 永远在队列尾部增加宏观工作。setTimeout 等宿主 API，则会增加宏观工作。接下来，咱们来具体介绍一下 Promise。

Promise

Promise 是 JavaScript 语言提供的一种标准化的异步治理形式，它的总体思维是，须要进行 io、期待或者其它异步操作的函数，不返回实在后果，而返回一个“承诺”，函数的调用方能够在适合的机会，抉择期待这个承诺兑现（通过 Promise 的 then 办法的回调）。Promise 的根本用法示例如下：

function sleep(duration) {return new Promise(function(resolve, reject) {setTimeout(resolve,duration);
    })}sleep(1000).then(()=> console.log("finished"));

这段代码定义了一个函数 sleep，它的作用是等待传入参数指定的时长。

Promise 的 then 回调是一个异步的执行过程，上面咱们就来钻研一下 Promise 函数中的执行程序，咱们来看一段代码示例：

var r = new Promise(function(resolve, reject){console.log("a");
    resolve()});r.then(() => console.log("c"));console.log("b")

咱们执行这段代码后，留神输入的程序是 a b c。在进入 console.log(“b”) 之前，毫无疑问 r 曾经失去了 resolve，然而 Promise 的 resolve 始终是异步操作，所以 c 无奈呈现在 b 之前。

接下来咱们试试跟 setTimeout 混用的 Promise。

在这段代码中，我设置了两段互不相干的异步操作：通过 setTimeout 执行 console.log(“d”)，通过 Promise 执行 console.log(“c”)。

var r = new Promise(function(resolve, reject){console.log("a");
    resolve()});setTimeout(()=>console.log("d"), 0)r.then(() => console.log("c"));console.log("b")

咱们发现，不管代码程序如何，d 必然产生在 c 之后，因为 Promise 产生的是 JavaScript 引擎外部的微工作，而 setTimeout 是浏览器 API，它产生宏工作。

为了了解微工作始终先于宏工作，咱们设计一个试验：执行一个耗时 1 秒的 Promise。

setTimeout(()=>console.log("d"), 0)var r = new Promise(function(resolve, reject){resolve()});r.then(() => {var begin = Date.now();
    while(Date.now() - begin < 1000);
    console.log("c1") 
    new Promise(function(resolve, reject){resolve()
    }).then(() => console.log("c2"))});

这里咱们强制了 1 秒的执行耗时，这样，咱们能够确保工作 c2 是在 d 之后被增加到工作队列。

咱们能够看到，即便耗时一秒的 c1 执行结束，再 enque 的 c2，依然先于 d 执行了，这很好地解释了微工作优先的原理。

通过一系列的试验，咱们能够总结一下如何剖析异步执行的程序：

首先咱们剖析有多少个宏工作；

在每个宏工作中，剖析有多少个微工作；

依据调用秩序，确定宏工作中的微工作执行秩序；

依据宏工作的触发规定和调用秩序，确定宏工作的执行秩序；

确定整个程序。

咱们再来看一个略微简单的例子：

function sleep(duration) {return new Promise(function(resolve, reject) {console.log("b");
        setTimeout(resolve,duration);
    })}console.log("a");sleep(5000).then(()=>console.log("c"));

这是一段十分罕用的封装办法，利用 Promise 把 setTimeout 封装成能够用于异步的函数。

咱们首先来看，setTimeout 把整个代码宰割成了 2 个宏观工作，这里不论是 5 秒还是 0 秒，都是一样的。

第一个宏观工作中，蕴含了先后同步执行的 console.log(“a”); 和 console.log(“b”);。

setTimeout 后，第二个宏观工作执行调用了 resolve，而后 then 中的代码异步失去执行，所以调用了 console.log(“c”)，最终输入的程序才是：a b c。

Promise 是 JavaScript 中的一个定义，然而理论编写代码时，咱们能够发现，它仿佛并不比回调的形式书写更简略，然而从 ES6 开始，咱们有了 async/await，这个语法改良跟 Promise 配合，可能无效地改善代码构造。

新个性：async/await

async/await 是 ES2016 新退出的个性，它提供了用 for、if 等代码构造来编写异步的形式。它的运行时根底是 Promise，面对这种比拟新的个性，咱们先来看一下根本用法。

async 函数必然返回 Promise，咱们把所有返回 Promise 的函数都能够认为是异步函数。

async 函数是一种非凡语法，特色是在 function 关键字之前加上 async 关键字，这样，就定义了一个 async 函数，咱们能够在其中应用 await 来期待一个 Promise。

function sleep(duration) {return new Promise(function(resolve, reject) {setTimeout(resolve,duration);
    })}async function foo(){console.log("a")
    await sleep(2000)
    console.log("b")}

这段代码利用了咱们之前定义的 sleep 函数。在异步函数 foo 中，咱们调用 sleep。

async 函数弱小之处在于，它是能够嵌套的。咱们在定义了一批原子操作的状况下，能够利用 async 函数组合出新的 async 函数。

function sleep(duration) {return new Promise(function(resolve, reject) {setTimeout(resolve,duration);
    })}async function foo(name){await sleep(2000)
    console.log(name)}async function foo2(){await foo("a");
    await foo("b");}

这里 foo2 用 await 调用了两次异步函数 foo，能够看到，如果咱们把 sleep 这样的异步操作放入某一个框架或者库中，使用者简直不须要理解 Promise 的概念即可进行异步编程了。

此外，generator/iterator 也经常被跟异步一起来讲，咱们必须阐明 generator/iterator 并非异步代码，只是在短少 async/await 的时候，一些框架（最驰名的要数 co）应用这样的个性来模仿 async/await。

然而 generator 并非被设计成实现异步，所以有了 async/await 之后，generator/iterator 来模仿异步的办法应该被废除。
​
更多内容请看：开发者网站

​