【译】JavaScript 运行原理（一）：引擎，运行时，调用栈的概述

原文连接 How JavaScript works: an overview of the engine, the runtime, and the call stack by Alexander Zlatkov

这个JavaScript 运行原理的第一章，一共18章，会后续持续更新，尽情期待，也可以关注一下，防止迷路

由于JavaScript越来越流行，各个团队都在许多不同的技术栈中使用它—前端，后端，混合APPs，嵌入式设备等等。

这篇文章是整个系列中的第一篇，旨在深入探讨Javascript和它的运行原理：我们认为，通过了解JavaScript的组成部分以及它们如何一起发挥作用，你能够编写出更好的代码和应用。我们还将分享在构建SessionStack（作者所在的公司）时使用的一些经验法则，SessionStack是一种轻量级JavaScript应用程序，必须强大且高性能才能保持竞争力。

如同GitHut stats展示的一样，就活动资源仓库和GitHub中的Push总数而言，JavaScript排名第一。在其他类别中也没有落后太多。

如果项目越来越依赖JavaScript，则意味着开发人员必须利用语言和生态系统提供的所有内容，并对内部进行越来越深入的了解，才能构建出色的软件。

但是事实证明，有很多开发人员每天都在使用JavaScript，但并不了解其内部原理。

概述

几乎每个人都已经听说过V8引擎，而且大多数人都知道JavaScript是单线程的，或者它正在使用回调队列。

在本文中，我们将详细介绍所有这些概念，并解释JavaScript实际如何运行。通过了解这些详细信息，能够编写更好地，无阻塞的应用程序，这些应用程序可以正确利用提供的API。

如果你是JavaScript的新手，此博客文章将帮助您了解JavaScript与其他语言相比为何如此“古怪”。

如果你是一位经验丰富的JavaScript开发人员，希望它会为你提供你每天使用的JavaScript运行时实际工作方式的新见解。

一. JavaScript 引擎

一个流行的JavaScript引擎是Google的V8，V8被用于chrome和Node.js中。举个例子，下图是V8的一个简单视图：

引擎包含两个主要的组件：

堆内存（Memory Heap）— 内存分配的地方
调用栈 — 这是代码执行时堆栈帧所在的位置

二. 运行时

浏览器中有许多API几乎所有的JavaScript开发人员都会用到（例如："setTimeout"）。这些API都不是JavaScript引擎提供的。

因此，他们从哪里来的？

事实证明，现实情况有点复杂。

因此，虽然我们有引擎，但是还有很多其他未知的内容。我们称之为Web API，由浏览器提供，例如DOM，AJAX，setTimeout 等等。

当然，我们还有非常流行的事件循环（event loop）和回调队列（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）。

我们也可以明确的知道抛出异常时栈路径(stack traces)是如何构造的—基本上就是异常发生时栈的状态，看下面的代码：

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