共计 1741 个字符，预计需要花费 5 分钟才能阅读完成。
原文: https://javascript.plainengli…
这篇博客通过动画的模式展示 js 的执行过程，对了解 js 是如何工作的很有帮忙。本篇翻译会对原文翻译有所删减，剔除一些废话，间接翻译外围的解说局部。另外程度无限，如果翻译有不对的中央，欢送斧正！
执行上下文
Everythig in Javascript happens inside an Execution Context
Javascript 中的一些都产生在执行上下文中。
我心愿大家都能记住这句话，因为它十分重要！你能够假如 执行上下文 是一个大的容器，当浏览器想要运行 js 代码时会调用它。在这个容器中有两个组件：
- 内存组件
- 代码组件
内存组件
内存组件也叫变量环境，在内存组件中，变量和函数存储成 键值对 的模式
代码组件
在代码组件中，代码会一行一行的执行，代码组件还有一个别名叫做 执行线程
javascript 是同步的单线程语言。因为它一次只能以特定的程序执行一个命令。
代码执行
var a = 2;
var b = 4;
var sum = a + b;
console.log(sum);
在这段代码中，初始化了两个变量 a,b, 而后将 a 和 b 相加的值赋值给了变量 sum, 咱们来看看这段代码是怎么执行的。
浏览器创立了一个全局执行上下文，全局上下文中蕴含了刚刚上文说到的内存组件还有代码组件。浏览器会分两个阶段运行这段代码。
- 内存创立阶段
- 代码执行阶段
内存创立阶段
在内存创立阶段，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。上面来剖析下这段代码的运行过程
- js 创立一个全局执行上下文，而后分两阶段，给函数 a 分配内存，而后执行代码调用函数 a。
- 调用函数后，又创立一个新的执行上下文(second)，这个新的执行上下文，搁置在全局执行上下文下面。
- 执行 second 执行上下文的代码，是调用函数 insideA
- 而后创立新的执行上下文(third), 搁置在 second 上，而后分配内存，执行代码返回 true;
- 开始顺次销毁 third,second, 全局 global 执行上下文。
最初
最近筹备每周翻译一篇文章，文章已放入 github, 如果有违心退出翻译的同学，可与我分割。
