emory Heap(内存堆) — 内存分配地址的地方

Call Stack(调用堆栈) — 代码执行的地方

上面只是简单的对js引擎进行一下基本的了解，下面开始正式介绍js引擎的执行过程（以V8引擎为例）

js引擎执行过程

全面分析js引擎的执行过程，主要分为三个阶段:

1. 语法分析

2. 预编译阶段

3. 执行阶段

下面着重讲一下这三个阶段：

分析该js脚本代码块的语法是否正确，如果出现不正确，则向外抛出一个语法错误（SyntaxError），停止该js代码块的执行，然后继续查找并加载下一个代码块；如果语法正确，则进入预编译阶段

预编译阶段

js代码块通过语法分析阶段之后，语法都正确的下回进入预编译阶段。
在分析预编译阶段之前，我们先来了解一下js的运行环境，运行环境主要由三种：
1、 全局环境 （js代码加载完毕后，进入到预编译也就是进入到全局环境）
2、 函数环境 （函数调用的时候，进入到该函数环境，不同的函数，函数环境不同）
3、 eval环境 （不建议使用，存在安全、性能问题）

每进入到一个不同的运行环境都会创建一个相应的 执行上下文（execution context）「下文会介绍」 ，那么在一段js程序中一般都会创建多个执行上下文，js引擎会以栈的数据结构对这些执行进行处理，形成函数调用栈（call stack）， 栈底永远是全局执行上下文（global execution context），栈顶则永远时当前的执行上下文 。
注意：执行上下文的相关概念会在下面进一步进行详细介绍

在执行阶段，我们暂时先不考虑异步（因为异步阶段涉及到的知识点是 事件循环【event loop】 ），等读完这篇文章之后并且理解之后，去看我写的 深入理解事件循环 这篇文章，就会进一步理解。

我们上文讲到V8引擎由两个主要部件组成:
emory Heap(内存堆) — 内存分配地址的地方
Call Stack(调用堆栈) — 代码执行的地方

我们 声明的函数与变量 被储存在 『内存堆』 中，而当我们要执行的时候，就必须借助于 『调用栈』 来解决问题。函数调用栈就是使用栈存取的方式进行管理运行环境，特点是 先进后出，后进后出

我们来分析一下js代码来理解函数调用栈：

function bar() {
    var B_context = "bar saucxs";
    function foo() {
        var f_context = "foo saucxs";
    foo()
bar()
上面代码块通过语法分析后，进入预编译阶段创建执行上下文，如图所示
1、首先进入到全局环境，创建全局执行上下文（global Execution Context ），推入到stack中；

2、调用bar函数，进入bar函数运行环境，创建bar函数执行上下文（bar Execution Context），推入stack栈中；

3、在bar函数内部调用foo函数，则再进入到foo函数运行环境中，创建foo函数执行上下文（foo Execution Context），如上图，由于foo函数内部没有再调用其他函数，那么则开始出栈；

5、foo函数执行完毕之后，栈顶foo函数执行上下文（foo Execution Context）首先出栈；

6、bar函数执行完毕，bar函数执行上下文（bar Execution Context）出栈；

7、全局上下文（global Execution Cntext）在浏览器或者该标签关闭的时候出栈。
说明：不同的运行环境执行都会进入到代码预编译和执行两个阶段，语法分析则在代码块加载完毕时统一检查语法。
上面的就是我们简单的对一段代码进行分析的过程，下面，我们讲一下在预编译阶段提到的执行上下文
执行上下文
执行上下文可理解为当前的执行环境，与该运行环境相对应.前面我们提到过，JavaScript中有三种可执行代码块，当然也对应着三种执行上下文。
全局执行上下文

这是基础上下文，任何不在函数内部的代码都在全局上下文中。一个程序中只会有一个全局执行上下文。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。
函数执行上下文

每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建。
Eval 执行上下文

执行在 eval 内部的代码也会有它属于自己的执行上下文，除非你想搞黑魔法，不然不要轻易使用它。
执行上下文分为两个阶段：
我们主要讨论创建阶段，执行阶段的主要工作就是分配变量
创建执行上下文的过程中，主要是做了下面三件事，如图所示：
1、确定 this 的值，也被称为 This Binding。

2、LexicalEnvironment（词法环境） 组件被创建。

3、VariableEnvironment（变量环境） 组件被创建。
This Binding
全局执行上下文中，this 的值指向全局对象，在浏览器中this 的值指向 window对象，而在nodejs中指向这个文件的module对象。
函数执行上下文中，this 的值取决于函数的调用方式。具体有：默认绑定、隐式绑定、显式绑定（硬绑定）、new绑定、箭头函数，具体内容请参考JavaScript深入之史上最全--5种this绑定全面解析这篇文章

词法环境有两个组成部分
1、环境记录：存储变量和函数声明的实际位置
2、对外部环境的引用：可以访问其外部词法环境
词法环境有两种类型
1、全局环境：是一个没有外部环境的词法环境，其外部环境引用为 null。拥有一个全局对象（window 对象）及其关联的方法和属性（例如数组方法）以及任何用户自定义的全局变量，this 的值指向这个全局对象。
2、函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments 对象。对外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。
直接看伪代码可能更加直观
GlobalExectionContext = {  // 全局执行上下文
  LexicalEnvironment: {       // 词法环境
    EnvironmentRecord: {        // 环境记录
      Type: "Object",              // 全局环境
      // 标识符绑定在这里 
      outer: <null>                // 对外部环境的引用
FunctionExectionContext = { // 函数执行上下文
  LexicalEnvironment: {       // 词法环境
    EnvironmentRecord: {        // 环境记录
      Type: "Declarative",         // 函数环境
      // 标识符绑定在这里             // 对外部环境的引用
      outer: <Global or outer function environment reference>  
变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。

在 ES6 中，词法 环境和 变量 环境的区别在于前者用于存储函数声明和变量（ let 和 const ）绑定，而后者仅用于存储变量（ var ）绑定。
使用例子进行介绍
let a = 20;  
const b = 30;  
var c;
function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
c = multiply(20, 30);
执行上下文如下所示
GlobalExectionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    outer: <null>  
  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      c: undefined,  
    outer: <null>  
FunctionExectionContext = {  
  ThisBinding: <Global Object>,
  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      Arguments: {0: 20, 1: 30, length: 2},  
    outer: <GlobalLexicalEnvironment>  
  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      g: undefined  
    outer: <GlobalLexicalEnvironment>  
变量提升的原因：在创建阶段，函数声明存储在环境中，而变量会被设置为 undefined（在 var 的情况下）或保持未初始化（在 let 和 const 的情况下）。所以这就是为什么可以在声明之前访问 var 定义的变量（尽管是 undefined ），但如果在声明之前访问 let 和 const 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。
执行上下文的属性
对于每个执行上下文，都有三个重要属性：
变量对象(Variable object，VO)
作用域链(Scope chain)
下面我们逐一简略讲解下：
变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

不同执行上下文下的变量对象稍有不同

全局上下文中的变量对象是全局对象

函数上下文：

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象其实是一个东西，但是两者的区别在于
1、变量对象（VO）是规范上或者是JS引擎上实现的，并不能在JS环境中直接访问。
2、当进入到一个执行上下文后，这个变量对象才会被激活，所以叫活动对象（AO），这时候活动对象上的各种属性才能被访问。
活动对象是在进入函数上下文时被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。
函数上下文的执行过程
执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：
进入执行上下文
进入执行上下文
当进入执行上下文时，这时候还没有执行代码，变量对象会包括：
1、函数的所有形参 (如果是函数上下文)：由名称和对应值组成的一个变量对象的属性被创建，如果没有实参，属性值设为undefined。
2、函数声明：由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建，如果变量对象已经存在相同名称的属性，则完全替换这个属性。
3、变量声明：由名称和对应值（undefined）组成一个变量对象的属性被创建，如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性。
在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

举个例子：
function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};
  b = 3;
foo(1);
在进入执行上下文后，这时候的 AO 是：
AO = {
    arguments: {
        0: 1,
        length: 1
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
代码执行的时候变成：
AO = {
    arguments: {
        0: 1,
        length: 1
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
下面思考这两道题目：输出的会是什么？
var foo = function () {
    console.log('foo1');
foo();  // foo1
var foo = function () {
    console.log('foo2');
foo(); // foo2
然而去看这段代码：
function foo() {
    console.log('foo1');
foo();  // foo2
function foo() {
    console.log('foo2');
foo(); // foo2
这是因为在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。
我们上文讲了每个执行上下文都有三个重要的属性，变量对象，作用域和this，由于作用域和this的篇幅过于长，所以，暂时不在这篇文章做展示