翻译：猖獗的手艺宅
本文首发微信民众号：前端前锋
驱逐关注，天天都给你推送新颖的前端手艺文章
你有无想过浏览器是如何读取和运转 JavaScript 代码的吗？这看起来很奇异，但你可以学到一些发作在幕后的事变。让我们经由过程引见 JavaScript 引擎的出色天下在这类言语中恣意畅游。
在 Chrome 中翻开浏览器掌握台，然后检察“Sources”标签。你会看到一个风趣的定名：Call Stack（在Firefox中，你可以在代码中插进去一个断点后看到挪用栈）：
什么是挪用栈（Call Stack）？看上去像是有很多东西正在运转，纵然是只实行几行代码也是云云。现实上，并非在统统 Web 浏览器上都能对 JavaScript 做到开箱即用。
有一个很大的组件来编译和诠释我们的 JavaScript 代码：它就是 JavaScript 引擎。最受驱逐的 JavaScript 引擎是V8，在 Google Chrome 和 Node.js 中应用，SpiderMonkey 用于 Firefox，以及 Safari/WebKit 所应用的 JavaScriptCore。
本日的 JavaScript 引擎是个很卓越的工程，只管它不可以掩盖浏览器事情的各个方面，然则每一个引擎都有一些较小的部件在为我们努力事情。
个中一个组件是挪用栈，它与全局内存和实行高低文一同运转我们的代码。你准备好驱逐他们了吗？
JavaScript 引擎和全局内存
我以为 JavaScript 既是编译型言语又是诠释型言语。信不信由你，JavaScript 引擎在实行之前现实上编译了你的代码。
是不是是听起来很奇异？这类把戏被称为 JIT（马上编译）。它本身就是一个很大的话题，纵然是一本书也不足以形貌 JIT 的事情道理。然则如今我们可以跳过编译背地的理论，专注于实行阶段，这依然是很风趣的。
先看以下代码：
var num = 2;
function pow(num) {
return num * num;
}假如我问你如何在浏览器中处置惩罚上述代码？你会说些什么？你可以会说“浏览器读取代码”或“浏览器实行代码”。
现实中比那越发玄妙。起首不是浏览器而是引擎读取该代码片断。 JavaScript引擎读取代码，当碰到第一行时，就会将一些援用放入全局内存中。
全局内存（也称为堆）是 JavaScript 引擎用来保留变量和函数声明的地区。所以回到前面的例子，当引擎读取上面的代码时，全局内存中被添补了两个绑定：
纵然例子中只要变量和函数，也要斟酌你的 JavaScript 代码在更大的环境中运转：浏览器或在 Node.js 中。在这些环境中，有很多预定义的函数和变量，被称为全局。全局内存将比 num 和 pow 所占用的空间更多。记着这一点。
此时没有实行任何操纵，然则假如尝试像如许运转我们的函数会如何：
var num = 2;
function pow(num) {
return num * num;
}
pow(num);将会发作什么？如今事变变得风趣了。当一个函数被挪用时，JavaScript 引擎会为别的两个盒子腾出空间：
- 全局实行高低文环境
- 挪用栈
全局实行高低文和挪用栈
在上一节你相识了 JavaScript 引擎是如何读取变量和函数声明的，他们终究进入了全局内存（堆）。
然则如今我们实行了一个 JavaScript 函数，引擎必须要处置惩罚它。如何处置惩罚？每一个 JavaScript 引擎都有一个基本组件，称为挪用栈。
挪用栈是一个栈数据结构：这意味着元素可以从顶部进入，但假如在它们上面另有一些元素，就不能脱离栈。 JavaScript 函数就是如许的。
当函数最先实行时，假如被某些其他函数卡住，那末它没法脱离挪用客栈。请注重，因为这个观点有助于明白“JavaScript是单线程”这句话。
然则如今让我们回到上面的例子。 当挪用该函数时，引擎会将该函数压入挪用客栈中：
我喜好将挪用栈看做是一叠薯片。假如还没有先吃掉顶部的统统薯片，就吃不到到底部的薯片！荣幸的是我们的函数是同步的：它是一个简朴的乘法，可以很快的获得盘算结果。
同时，引擎还分配了全局实行高低文，这是 JavaScript 代码运转的全局环境。这是它的模样：
设想一下全局实行环境作为一个海洋，个中 JavaScript 全局函数就像鱼一样在里面泅水。何等优美！但这只是故事的一半。假如函数有一些嵌套变量或一个或多个内部函数如何办？
纵然鄙人面的简朴变体中，JavaScript 引擎也会建立当地实行高低文：
var num = 2;
function pow(num) {
var fixed = 89;
return num * num;
}
pow(num);请注重，我在函数 pow 中增加了一个名为 fixed 的变量。在这类情况下，当地实行高低文中将包括一个用于对峙牢固的框。我不太擅长在小方框里画更小的框！你如今必需应用本身的设想力。
当地实行高低文将出如今 pow 四周，包括在全局实行高低文中的绿色框内。 你还可以设想，关于嵌套函数中的每一个嵌套函数，引擎都邑建立更多的当地实行高低文。这些框可以很快的抵达它们该去的处所。
单线程的JavaScript
我们说 JavaScript 是单线程的，因为有一个挪用栈处置惩罚我们的函数。也就是说，假如有其他函数守候实行，函数是不能脱离挪用栈的。
当处置惩罚同步代码时，这不是什么题目。比方，盘算两个数字的和就是同步的，而且以微秒做为运转单元。然则当举行网络通信和与外界的互动时呢？
荣幸的是 JavaScript引擎被默许设想为异步。纵然他们一次可以实行一个函数，也有一种要领可以让外部实体实行较慢的函数：在我们的例子中是浏览器。我们稍后会议论这个话题。
这时候，你应当相识到当浏览器加载某些 JavaScript 代码时，引擎会逐行读取并实行以下步骤：
- 应用变量和函数声明添补全局内存（堆）
- 将每一个函数挪用送到挪用栈
- 建立一个全局实行高低文，其在中实行全局函数
- 建立了很多细小的当地实行高低文（假如有内部变量或嵌套函数）
到此为止，你脑子里应当有了一个 JavaScript 引擎同步机制的全景图。在接下来的部份中，你将看到异步代码如何在 JavaScript 中事情以及为何如许事情。
异步JavaScript，回调行列和事宜轮回
全局内存、实行高低文和挪用栈诠释了同步 JavaScript 代码在浏览器中的运转体式格局。但是我们还错过了一些东西。当有异步函数运转时会发作什么？
我所指的异步函数是每次与外界的互动都须要一些时候才完成的函数。比方挪用 REST API 或挪用计时器是异步的，因为它们可以须要几秒钟才运转终了。 如今的 JavaScript 引擎都有方法处置惩罚这类函数而不会壅塞挪用客栈，浏览器也是云云。
请记着，挪用客栈一次只可以实行一个函数，以至一个壅塞函数都可以直接凝结浏览器。荣幸的是，JavaScript 引擎非常智能，而且能在浏览器的协助下处理题目。
当我们运转异步函数时，浏览器会吸收该函数并运转它。斟酌下面的计时器：
setTimeout(callback, 10000);
function callback(){
console.log('hello timer!');
}你一定屡次见到过 setTimeout ，然则你可以不知道它不是一个内置的 JavaScript 函数。即当 JavaScript 降生时，言语中并没有内置的 setTimeout。
现实上 setTimeout 是所谓的 Browser API 的一部份，它是浏览器供应给我们的方便东西的鸠合。何等体恤！这在实践中意味着什么？因为 setTimeout 是一个浏览器 API，该函数由浏览器直接运转（它会临时出如今挪用栈中，但会马上删除）。
然后 10 秒后浏览器吸收我们传入的回调函数并将其移动到回调行列。此时我们的 JavaScript 引擎中另有两个框。请看以下代码：
var num = 2;
function pow(num) {
return num * num;
}
pow(num);
setTimeout(callback, 10000);
function callback(){
console.log('hello timer!');
}可以如许画完成我们的图：
如你所见 setTimeout 在浏览器高低文中运转。 10秒后，计时器被触发，回调函数准备好运转。但起首它必需经由过程回调行列。回调行列是一个行列数据结构，望文生义是一个有序的函数行列。
每一个异步函数在被送入挪用栈之前必需经由过程回调行列。但谁推动了这个函数呢？另有另一个名为 Event Loop 的组件。
Event Loop 如今只做一件事：它应搜检挪用栈是不是为空。假如回调行列中有一些函数，而且假如挪用栈是余暇的，那末这时候应将回调送到挪用栈。在完成后实行该函数。
这是用于处置惩罚异步和同步代码的 JavaScript 引擎的大图：
设想一下，callback() 已准备好实行。当 pow() 完成时，挪用栈为空，事宜轮回推送 callback()。就是如许！纵然我简化了一些东西，假如你明白了上面的图，那末就可以明白 JavaScript 的统统了。
请记着：Browser API、回调行列和事宜轮回是异步 JavaScript 的支柱。
假如你喜好视频，我发起去看 Philip Roberts 的视频：事宜轮回是什么。这是关于时候轮回的最好的诠释之一。
youtube: https://www.youtube.com/embed…
对峙下去，因为我们还没有应用异步 JavaScript。在后面的内容中，我们将细致引见 ES6 Promises。
回调地狱和 ES6 的 Promise
JavaScript 中的回调函数无处不在。它们用于同步和异步代码。比方 map 要领：
function mapper(element){
return element * 2;
}
[1, 2, 3, 4, 5].map(mapper);mapper 是在 map 中通报的回调函数。上面的代码是同步的。但要斟酌一个距离：
function runMeEvery(){
console.log('Ran!');
}
setInterval(runMeEvery, 5000);该代码是异步的，我们在 setInterval 中通报了回调 runMeEvery。回调在 JavaScript 中很广泛，所以近几年里涌现了一个题目：回调地狱。
JavaScript中的回调地狱指的是编程的“作风”，回调嵌套在嵌套在……其他回调中的回调中。恰是因为 JavaScript 的异步性子致使顺序员掉进了这个圈套。
说实话，我从来没有碰到过极度的回调金字塔，或许是因为我注重代码的可读性，而且老是试着对峙这个准绳。假如你发明本身掉进了回调地狱，那就申明你的函数太多了。
我不会在这里议论回调地狱，假如你很感兴趣的话，给你引荐一个网站： callbackhell.com 更深切地议论了这个题目并供应了一些处理计划。我们如今要关注的是 ES6 Promise。 ES6 Promise 是对 JavaScript 言语的补充，旨在处理恐怖的回调地狱。但 Promise 是什么？
JavaScript Promise 是将来事宜的示意。Promise 可以以 success 完毕：用行话说就是它已 resolved（已完成）。但假如 Promise 失足，我们会说它处于rejected状况。 Promise 也有一个默许状况：每一个新Promise都以 pending 状况最先。
建立和应用 Promise
要建立新的 Promise，可以经由过程将回调函数传给要挪用的 Promise 组织函数的要领。回调函数可以应用两个参数：resolve 和 reject。让我们建立一个新的 Promise，它将在5秒后 resolve（你可以在浏览器的掌握台中尝试这些例子）：
const myPromise = new Promise(function(resolve){
setTimeout(function(){
resolve()
}, 5000)
});如你所见，resolve 是一个函数，我们挪用它使 Promise 胜利。下面的例子中 reject 将获得 rejected 的 Promise：
const myPromise = new Promise(function(resolve, reject){
setTimeout(function(){
reject()
}, 5000)
});请注重，在第一个示例中，你可以省略 reject ，因为它是第二个参数。然则假如你盘算应用 reject，就不能省略 resolve。换句话说，以下代码将没法事情，终究将以 resolved 的 Promise 完毕：
// Can't omit resolve !
const myPromise = new Promise(function(reject){
setTimeout(function(){
reject()
}, 5000)
});如今 Promise 看起来不是那末有效。这些例子不向用户打印任何内容。让我们增加一些数据。 resolved 的和rejected 的 Promises 都可以返回数据。这是一个例子：
const myPromise = new Promise(function(resolve) {
resolve([{ name: "Chris" }]);
});但我们依然看不到任何数据。 要从 Promise 中提取数据，你还须要一个名为 then 的要领。它须要一个回调（真是具有嗤笑意味！）来吸收现实的数据：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then(function(data) {
console.log(data);
});作为 JavaScript 开发人员，你将主要与来自外部的 Promises 举行交互。相反，库的开发者更有可以将遗留代码包装在 Promise 组织函数中，以下所示：
const shinyNewUtil = new Promise(function(resolve, reject) {
// do stuff and resolve
// or reject
});在须要时，我们还可以经由过程挪用 Promise.resolve() 来建立和处理 Promise：
Promise.resolve({ msg: 'Resolve!'})
.then(msg => console.log(msg));所以回忆一下，JavaScript Promise 是将来发作的事宜的书签。事宜以挂起状况最先，可以胜利（resolved，fulfilled）或失利（rejected）。 Promise 可以返回数据，经由过程把 then 附加到 Promise 来提取数据。鄙人一节中，我们将看到如何处置惩罚来自 Promise 的毛病。
ES6 Promise 中的毛病处置惩罚
JavaScript 中的毛病处置惩罚一向很简朴，最少关于同步代码而言。请看下面的例子：
function makeAnError() {
throw Error("Sorry mate!");
}
try {
makeAnError();
} catch (error) {
console.log("Catching the error! " + error);
}输出将是：
Catching the error! Error: Sorry mate!毛病在 catch 块中被捕捉。如今让我们尝试应用异步函数：
function makeAnError() {
throw Error("Sorry mate!");
}
try {
setTimeout(makeAnError, 5000);
} catch (error) {
console.log("Catching the error! " + error);
}因为 setTimeout，上面的代码是异步的。假如运转它会发作什么？
throw Error("Sorry mate!");
^
Error: Sorry mate!
at Timeout.makeAnError [as _onTimeout] (/home/valentino/Code/piccolo-javascript/async.js:2:9)此次输出是差别的。毛病没有经由过程 catch块。它可以自由地在栈中流传。
那是因为 try/catch 仅适用于同步代码。假如你觉得猎奇，可以在 Node.js 中的毛病处置惩罚中获得该题目的细致诠释。
荣幸的是，Promise 有一种处置惩罚异步毛病的要领，就像它们是同步的一样。
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});在上面的例子中，我们可以用 catch 处置惩罚顺序毛病，再次采取回调：
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});
myPromise.catch(err => console.log(err));我们也可以挪用 Promise.reject() 来建立和 reject Promise：
Promise.reject({msg: 'Rejected!'}).catch(err => console.log(err));ES6 Promise 组合器：Promise.all，Promise.allSettled，Promise.any和它们的小伙伴
Promise 并非在孤军奋战。 Promise API 供应了一系列将 Promise 组合在一同的要领。个中最有效的是Promise.all，它吸收一系列 Promise 并返回一个Promise。题目是当任何一个Promise rejected时，Promise.all 就会 rejects 。
Promise.race 在数组中的一个 Promise 完毕后马上 resolves 或 reject。假如个中一个Promise rejects ，它依然会rejects。
较新版本的 V8 也将完成两个新的组合器：Promise.allSettled 和 Promise.any。 Promise.any 仍处于提案的初期阶段：在撰写本文时，还不支撑。
Promise.any 可以表明任何 Promise 是不是 fullfilled。与 Promise.race 的区分在于 Promise.any 不会 reject，纵然是个中一个Promise 被 rejected。
最风趣的是 Promise.allSettled。它依然须要一系列的 Promise，但假如个中一个 Promise rejects 的话 ，它不会被短路。当你想要搜检 Promise 数组中是不是悉数已处理时，它是有效的。可以以为它老是和 Promise.all 对着干。
ES6 Promise 和 microtask 行列
假如你还记得前面的章节，JavaScript 中的每一个异步回调函数都邑在被推入挪用栈之前在回调行列中完毕。然则在 Promise 中通报的回调函数有差别的运气：它们由微使命行列处置惩罚，而不是由回调行列处置惩罚。
你应当注重一个风趣的征象：微使命行列优先于回调行列。当事宜轮回搜检是不是有任何新的回调准备好被推入挪用栈时，来自微使命行列的回调具有优先权。
Jake Archibald 在使命、微使命、行列和时候表一文中更细致地引见了这些机制，这是一篇很棒的文章。
异步的进化：从 Promise 到 async/await
JavaScript 正在疾速生长，每一年我们都邑精益求精言语。Promise 似乎是抵达了尽头，但 ECMAScript 2017（ES8）的新语法降生了：async / await 。
async/await 只是一种作风上的革新，我们称之为语法糖。 async/await 不会以任何体式格局转变 JavaScript（请记着，JavaScript 必需向后兼容旧浏览器，不该损坏现有代码）。
它只是一种基于 Promise 编写异步代码的新要领。让我们举个例子。之前我们用 then 的 Promise：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
myPromise.then((data) => console.log(data))如今应用async/await，我们可以从另一个角度对待用同步的体式格局处置惩罚异步代码。我们可以将 Promise 包装在标记为 async 的函数中，然后守候结果：
const myPromise = new Promise(function(resolve, reject) {
resolve([{ name: "Chris" }]);
});
async function getData() {
const data = await myPromise;
console.log(data);
}
getData();如今风趣的是异步函数将一直返回 Promise，而且没人能阻挠你如许做：
async function getData() {
const data = await myPromise;
return data;
}
getData().then(data => console.log(data));如何处置惩罚毛病呢？ async/await 供应的一个优点就是有时机应用 try/catch。 （拜见异步函数中的非常处置惩罚及测试要领 ）。让我们再看一下Promise，我们应用catch处置惩罚顺序来处置惩罚毛病：
const myPromise = new Promise(function(resolve, reject) {
reject('Errored, sorry!');
});
myPromise.catch(err => console.log(err));应用异步函数，我们可以重构以下代码：
async function getData() {
try {
const data = await myPromise;
console.log(data);
// or return the data with return data
} catch (error) {
console.log(error);
}
}
getData();不是每一个人都邑用这类作风。 try/catch 会使你的代码杂沓。虽然用 try/catch另有另一个题目要指出。请看以下代码，在try块中激发毛病：
async function getData() {
try {
if (true) {
throw Error("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}
getData()
.then(() => console.log("I will run no matter what!"))
.catch(() => console.log("Catching err"));哪一字符串会打印到掌握台？请记着，try/catch是一个同步组织，但我们的异步函数会发生一个 Promise。他们在两条差别的轨道上行驶，就像两列火车。但他们永久不会谋面！也就是说，throw 激发的毛病永久不会触发 getData() 的 catch 处置惩罚顺序。运转上面的代码将致使 “捉住我，假如你可以”，然后“不管如何我都邑跑！”。
现实上我们不愿望 throw 触发当前的处置惩罚。一种可以的处理计划是从函数返回 Promise.reject()：
async function getData() {
try {
if (true) {
return Promise.reject("Catch me if you can");
}
} catch (err) {
console.log(err.message);
}
}如今毛病将按预期处置惩罚：
getData()
.then(() => console.log("I will NOT run no matter what!"))
.catch(() => console.log("Catching err"));
"Catching err" // output除此之外 async/await 似乎是在 JavaScript 中构建异步代码的最好体式格局。我们可以更好地掌握毛病处置惩罚，代码看起来更清楚。
我不发起把统统的 JavaScript 代码都重构为 async/await。这必需是与团队议论以后的挑选。然则假如你本身事情的话，不管你应用简朴的 Promise 照样 async/await 都是属于个人偏好的题目。
总结
JavaScript 是一种用于Web的脚本言语，具有先被编译然后再由引擎诠释的特征。在最盛行的 JavaScript 引擎中，有 Google Chrome 和 Node.js 应用的V8，为网络浏览器 Firefox 构建的 SpiderMonkey，由Safari应用的 JavaScriptCore。
JavaScript 引擎有很多部份构成：挪用栈、全局内存、事宜轮回和回调行列。统统这些部份在圆满的调解中协同事情，以便在 JavaScript 中处置惩罚同步和异步代码。
JavaScript 引擎是单线程的，这意味着只要一个用于运转函数的挪用客栈。这类限定是 JavaScript 异步性子的基本：统统须要时候的操纵必需由外部实体（比方浏览器）或回调函数担任。
为了简化异步代码流程，ECMAScript 2015 给我们带来了 Promises。 Promise 是一个异步对象，用于示意异步操纵的失利或胜利。但革新并没有止步于此。 2017年 async/await降生了：它是 Promise 的一种作风上的填补，可以用来编写异步代码，就好像它是同步的一样。
本文首发微信民众号：前端前锋
驱逐扫描二维码关注民众号，天天都给你推送新颖的前端手艺文章
