原文: https://javascript.plainengli...

这篇博客通过动画的模式展示js的执行过程，对了解js是如何工作的很有帮忙。本篇翻译会对原文翻译有所删减，剔除一些废话，间接翻译外围的解说局部。另外程度无限，如果翻译有不对的中央，欢送斧正！

执行上下文

Everythig in Javascript happens inside an Execution Context

Javascript中的一些都产生在执行上下文中。

我心愿大家都能记住这句话，因为它十分重要！你能够假如执行上下文是一个大的容器，当浏览器想要运行js代码时会调用它。在这个容器中有两个组件：

  1. 内存组件
  2. 代码组件

内存组件

内存组件也叫变量环境，在内存组件中，变量和函数存储成 键值对 的模式

代码组件

在代码组件中，代码会一行一行的执行，代码组件还有一个别名叫做 执行线程

javascript是同步的单线程语言。因为它一次只能以特定的程序执行一个命令。

代码执行

var a = 2;var b = 4;var sum = a + b;console.log(sum);

在这段代码中，初始化了两个变量a,b,而后将a和b相加的值赋值给了变量sum,咱们来看看这段代码是怎么执行的。

浏览器创立了一个全局执行上下文，全局上下文中蕴含了刚刚上文说到的内存组件还有代码组件。浏览器会分两个阶段运行这段代码。

  1. 内存创立阶段
  2. 代码执行阶段

内存创立阶段

在内存创立阶段，js会扫描所有的代码，并为变量和函数分配内存。对于变量来说，在变量创立阶段，它们会被存储成undefined。至于函数，js会保留整个函数代码，在前面的例子中会讲到。

代码执行阶段

在代码执行阶段，js会逐行遍历所有的代码。在内存中，直到a被调配为2之前，a的值始终都为undefined。b也是同样的。而后js会将a和b相加的值6，存入内存中。而后打印sum值，最初销毁全局执行上下文。

函数在执行上下文中是怎么被调用的

js中的函数与其余编程语言的函数工作形式是不同的。举个栗子

var n = 2;function square(num) { var ans = num * num; return ans;}var square2 = square(n);var square4 = square(4);

下面的函数square接管一个参数num并返回num的平方。

在内存创立阶段，js创立了一个全局执行上下文，并且给变量和函数分配内存。函数将会被整个存储在内存中。

在代码执行阶段，js调配2值给了变量a,而后遇到函数，此时函数曾经调配了内存，会间接跳到第6行，当运行函数square时，js又会在全局执行上下文下创立一个新的执行上下文。

在新的执行上下文中又会经验上文提到的两个阶段。在新执行上下文的内存创立阶段，给num,ans分配内存。

调配实现后，开始代码执行阶段，将n此时的值2调配给num,而后计算平方后将值调配给ans,而后返回值，再调配给square2。函数实现返回后会立马销毁它的执行上下文。

而后同样的形式解决square4。

所有的代码执行结束后，销毁全局执行上下文。

调用栈(call stack)

在js中调用函数时，js会创立一个执行上下文，当函数存在嵌套的状况是，执行上下文将变得非常复杂。js会通过调用栈治理执行上下文的创立与删除。

栈

栈是一个有序我的项目汇合，只能在一端进行插入和删除操作。相似于堆书。

function a() {    function insideA() {        return true;    }    insideA();}a();

下面代码中，创立了一个函数a，a函数外面又调用了一个返回true的函数insadeA。上面来剖析下这段代码的运行过程

  1. js创立一个全局执行上下文，而后分两阶段，给函数a分配内存，而后执行代码调用函数a。
  2. 调用函数后，又创立一个新的执行上下文(second)，这个新的执行上下文，搁置在全局执行上下文下面。
  3. 执行second执行上下文的代码，是调用函数insideA
  4. 而后创立新的执行上下文(third),搁置在second上，而后分配内存，执行代码返回true;
  5. 开始顺次销毁third,second,全局global执行上下文。

最初

最近筹备每周翻译一篇文章，文章已放入github,如果有违心退出翻译的同学，可与我分割。