（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1. 简介

JS入门难点系列到此，我们将进行一个阶段性的总结。将前面所学的有关作用域，LHS，RHS，执行上下文栈，执行上下文，变量对象，作用域链，this等知识点串联起来，使大家有一个更新清晰的认识。

2. 概念回顾

1. 作用域：其实是一种规则与概念，我们并不能直接访问他，是用来帮我们区分变量是在哪里定义的。作用域有三种（ES6之前）：全局作用域，局部（函数）作用域，eval作用域。ES6之后又多了一个块级作用域。比如，我们经常会这么说，在全局作用域定义了一个变量a，在当前函数作用域定义了一个变量a。虽然是a，但你可以分辨这其实是两个a，因为其所处的作用域不同。

2. 作用域链：很容易与作用域弄混。作用域链其实是在进入执行上下文以后创建的。是由当前的活动对象和当前函数的[[scope]]属性拼接而成。如果在全局执行上下文，则当前作用域链仅有全局变量对象。要记住，全局变量对象始终在作用域链的顶端。而在代码执行时，对变量的查找，不管是LHS，还是RHS，都是从当前作用域开始，顺着作用域链向前查找。

3. LHS，RHS：引擎的查询方式有两种，即LHS和RHS。代码中出现变量时，如果目的是要进行存储，也就是我们关心的是要找到变量的容器本身，来进行不同数据的存储赋值操作，而不关心现在这个容器里面存的是什么，就会用到LHS。而如果我们的目的只是拿这个变量来用，也就是只关心这个变量存储的内容是啥，而不需要关心这个变量存在哪个容器，那么就会用到RHS。

4. 执行上下文：JavaScript 的可执行代码(executable code)有以下三类：全局代码、函数代码、eval代码。当JS引擎遇到这三类代码时，会开始做准备工作，创建一个“执行上下文(execution context)"。执行上下文的生命周期有两个阶段：准备阶段和代码执行阶段。在准备阶段，会做三件事，即用arguments创建当前执行上下文的活动对象，确定当前执行上下文的作用域链，和绑定当前执行上下文的this属性。

5. 执行上下文栈：当JS执行到一个函数的时候，就会创建该函数的“执行上下文(execution context)"。JS代码中可能出现为数众多的函数，所以JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。

6. 变量对象：变量对象是与执行上下文相关的数据作用域，存储了在执行上下文中定义的变量和函数声明。全局上下文中的变量对象就是全局对象。在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

7. this：this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

3.关键点划分

这么多的概念，在JS编译执行过程中，很容易让大家绕晕。但其实，只要把握住整个JS编译执行的关键点，一切困难都会迎刃而解。那么这个关键点是什么呢？其实就是函数执行。

我们来看，只有在执行到一个函数时，才会创建函数执行上下文并压入函数执行上下文栈，不管在当前执行上下文的准备阶段或者是在执行该函数前做了哪些操作，我们只需要关心函数执行那一刻的快照，包括此时该函数的[[scope]]属性值，此时函数执行上下文栈，此时传入的arguments，此时函数的调用方式。然后进入该函数上下文，函数上下文会根据arguments来初始化活动对象AO，通过AO+[[scope]]来确定作用域链，并通过调用方式确定this绑定。然后进入函数执行上下文的代码执行阶段，直到遇见下一个函数执行，周而复始或者执行完毕还没有遇到下一个函数执行，执行完毕的函数上下文就会逐个出栈并销毁，直到程序关闭，全局执行环境销毁。

4. 流程分析

我们以下面这段代码为例来进行分析：

var scope = "global scope";

function checkscope() {
    var scope = "local scope";

    function f() {
        return scope;
    }

    return f();
}

checkscope();

现在我们尝试用之前所学走一遍代码的编译执行流程：

1. 执行全局代码，创建全局执行上下文，全局上下文被压入执行上下文栈。

ECStack = [
    globalContext
];

2. 全局上下文初始化。(初始化全局环境的VO，确定全局环境的Scope，绑定全局环境的this。)当然，在此阶段，完成了全局作用域的变量声明和函数声明，并且进行了全局作用域的变量提升和函数提升。

globalContext = {
    VO: {
        global: window,
        scope: undefined,
        checkscope: reference to function checkscope
    },
    Scope: [globalContext.VO],
    this: globalContext.VO
}

3. checkScope函数执行前阶段。初始化的同时，checkscope 函数被创建，保存全局环境的作用域链到函数checkscope的内部属性[[scope]]。（checkScope在此处是使用函数声明，所以猜测其[[scope]]属性是在全局环境初始化阶段，但如果此时使用变量赋值“var checkscope = function (){...}”这种写法，那么此时checkScope属性的写入是在全局环境的执行阶段）。但是[[scope]]属性的创建和写入时机其实并不是重点，我们说了重点是对关键点的划分。就是checkscope函数执行那一刻，[[scope]]属性是一定已经创建并写入了全局执行环境的作用域链即可。并且执行了其他代码。

checkscope.[[scope]] = [
    globalContext.VO
];

globalContext = {
    VO: {
        global: window,
        scope: "global scope",
        checkscope: reference to function checkscope
    },
    Scope: [globalContext.VO],
    this: globalContext.VO
}

4. 执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈.

ECStack = [
    checkscopeContext,
    globalContext
];

5. checkscope 函数执行环境初始化（用 arguments 创建活动对象checkscopeContext.AO，利用活动对象checkscopeContext.AO与checkscope.[[scope]]形成checkscope 函数执行环境的作用域链checkscopeContext.Scope。绑定this到undefined(非严格模式下会绑定到全局对象)。在此阶段，进行了加入形参、函数声明、变量声明，函数提升，变量提升等操作。

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope: undefined,
        f: reference to function f(){}
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

6. checkscope 函数执行环境初始化的同时，或者准确说，f函数执行之前，f函数的[[scope]]属性创建并写入。并且f函数执行前的的其他代码也会执行。

f.[[scope]] = [
    checkscopeContext.AO,
    globalContext.VO
];

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope: "local scope",
        f: reference to function f(){}
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

7. 执行f函数，创建 f 函数执行上下文，f 函数执行上下文被压入执行上下文栈。

ECStack = [
    fContext,
    checkscopeContext,
    globalContext
];

8. f 函数执行环境初始化（参考第5步）。

fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
    this: undefined
}

9. f函数中代码执行。需要对scope进行RHS查找。查找从当前作用域开始沿着作用域链向上。（或者说从作用域链中的当前活动对象开始沿着作用域链向上查找）。记住，这里是两种说法，但是作用域与活动对象并不等同。

// 查找过程：
1. fContext.AO.scope 没有该变量声明（即该变量不在当前作用域，记住不是为undefined，因为该变量可能存在，但是值为undefined），继续
2. checkscopeContext.AO.scope 有该变量声明，获取其值为"local scope"

10. f 函数执行完毕，返回"local scope"。f 函数上下文从执行上下文栈中弹出。

ECStack = [
    checkscopeContext,
    globalContext
];

11. checkscope 函数在执行完f处获取f执行的返回值"local scope"，函数继续向下执行。

12. checkScope执行完毕，返回获取到的返回值"local scope"。checkScope 函数上下文从执行上下文栈中弹出。

ECStack = [
    globalContext
];

13. 代码执行流回到全局执行环境中调用checoscope处，拿到checkScope返回值并继续向下执行。

14. 直到程序终止，或者页面关闭。全局上下文出栈并销毁。

参考

JS入门难点解析3-作用域
JS入门难点解析4-执行上下文栈
JS入门难点解析5-变量对象
JS入门难点解析6-作用域链
JS入门难点解析7-this
一道js面试题引发的思考
JavaScript深入之执行上下文
深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
前端基础进阶（二）：执行上下文详细图解
Javascript变量的作用域和作用域链详解
JavaScript关于作用域、作用域链和闭包的理解
理解js中的作用域,作用域链以及初探闭包