JavaScript是如何工作的：引擎，运行时间以及回调的概述

最新推荐文章于 2021-11-01 18:48:17 发布

weixin_34406796

最新推荐文章于 2021-11-01 18:48:17 发布

阅读量145

点赞数

文章标签： javascript runtime ui ViewUI

原文链接：https://segmentfault.com/a/1190000011155023

版权

How JavaScript works: an overview of the engine, the runtime, and the call stack

JavaScript是如何工作的：引擎，运行时以及调用栈的概述

原文：How JavaScript works: an overview of the engine, the runtime, and the call stack

译者：neal1991

welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me

LICENSE: MIT

随着JavaScript变得越来越流行，团队在多个层级都对它进行利用－前端，后端，混合应用，嵌入式设备以及更多。

正如GitHut stats所展示的那样，JavaScript是Github上面最活跃以及总Push次数最多的语言。在其它类别中也不会落后太多。

(获取最新的 GitHub language stats).

如果项目对于JavaScript越来越依赖，这意味着为了构建好的软件开发者必须利用这个JS提供的一切并且对于生态系统的内部有着更深的理解。

因此，尽管每天有很多开发者在使用JavaScript，但并不知道内部到底发生了什么。

概览

几乎每个人都已经听说过V8引擎的概念，并且很多知道JavaScript是单线程的或者它是使用一个回调队列的。

在这篇博文中，我们将会详细讲述所有概念并且解释JavaScript是如何真正运行的。在了解这些细节之后，你将能够写出能够适宜地利用提供的API的更好的，非阻塞的app。

如果对于JvaScript来说还不是很了解，这篇博文将会帮助你理解为什么JavaScript和别的语言相比如此“奇怪”。

如果你是一个有经验的JavaScript开发者，希望这篇文章能够让你对你每天使用的JavaScript Runtime是如何真正工作的。

JavaScript 引擎

最流行的JavaScript引擎的例子之一就是谷歌的V8引擎。比如Chrome以及Node.js内部就是使用V8引擎。下面是一个简单的视图示例：

引擎主要由两个部分组成：

内存堆——这是内存分配发生的地方
回调——这是你代码执行时的栈帧。

Runtime

有很多浏览器中的API几乎都被JavaScript开发者使用过（比如：'setTimeout'）。然而这些API并不是由引擎提供的。

那么，它们是从哪来的呢？

事实证明这有一点复杂。

因此，虽然我们有引擎但实际上是有更多。我们有那些由浏览器提供的Web API，像DOM, AJAX, setTimeout以及更多。

接着，我们还有非常流行的事件循环(event loo)以及回调队列(callback queue)。

调用栈

JavaScript是一种单线程的编程语言，这意味着它只拥有一个单独的调用栈。因此它一次只能做一件事情。

调用栈是一种数据结构记录着我们正在程序的什么地方。如果我们步入一个函数，我们就将这个函数放在栈的顶部。如果我们从一个函数返回，我们则是将这个函数从栈顶弹出。这就是这个栈所做的一切。

让我们看一个例子。参看如下代码：

function multiply(x, y) {
    return x * y;
}

function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}

printSquare(5);

当引擎执行这段代码的时候，调用栈首先将会是空的。然后，将会按照以下步骤进行：

调用栈中的每一项都被称为栈帧(Stack Frame)。

并且这正是都异常被抛出的时候栈追踪是如何构建的——这基本就是异常发生时调用栈的状态。请看如下代码：

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}

function bar() {
    foo();
}

function start() {
    bar();
}

start();

如果这段代码在Chrome中执行（假设代码是在一个叫做foo.js的文件中），接下来的栈追踪将会产生：