为什么你始终理解不了JavaScript做用域链？

前言

掘金上关于做用域和做用域链的讨论很是多，但少有人来说清楚JS中相关的机制，这里我就捡一些大佬们看剩的知识，来说讲理解做用域以前的准备。 带着这些问题看文章：

• JavaScript 是如何编译执行的？
• 查找做用域时是如何一层层往上查询的？
• JavaScript做用域链的本质是？

想直接看解析的请跳到：2. JavaScript是如何执行的?

还有速记口诀：做用域链口诀

1. 理解前的普及：编译原理

1.1 分词/词法解析

这些代码块被称为词法单元(token) ，这些词法单元组成了词法单元流数组

var sum = 30;
// 词法分析后的结果
[
  "var" : "keyword",
  "sum" : "identifier",
  "="   : "assignment",
  "30"  : "integer",
  ";"   : "eos" (end of statement)
]
复制代码

1.2 语法分析

把词法单元流数组转换成一个由元素逐级嵌套所组成的表明程序语法结构的树，这个树被称为“抽象语法树” (Abstract Syntax Tree, 简称AST)。

1.3 代码生成

将抽象语法树（AST）转换为一组机器指令，也就是可执行代码，简单说，就是用来建立一个变量a，并将3这个值储存在a中。

1.4 JavaScript 编译过程的不一样处

• JavaScript 大部分状况下编译发生在代码执行前的几微秒(甚至更短!)的时间内
• JavaScript 引擎用尽了各类办法(好比 JIT，能够延 迟编译甚至实施重编译)来保证性能最佳

2. JavaScript是如何执行的?

• 核心重点：变量和函数在内的全部声明都会在任何代码被执行前首先 被处理。

• 函数运行的瞬间，建立一个AO (Active Object 活动对象)运行载体。

2.1 例子一

function a(age) {
    console.log(age);
    var age = 20
    console.log(age);
    function age() {
    }
    console.log(age);
}
a(18);
复制代码

2.1.1 分析阶段

函数运行的瞬间，建立一个AO (Active Object 活动对象)

AO (Active Object 活动对象) 至关于载体

AO = {}
复制代码

第一步，分析函数参数：

形式参数：AO.age = undefined
实参：AO.age = 18
复制代码

第二步，分析变量声明：

// 第3行代码有var age
// 但此前第一步中已有AO.age = 18, 有同名属性,不作任何事
即AO.age = 18
复制代码

第三步，分析函数声明：

// 第5行代码有函数age
// 则将function age(){}付给AO.age
AO.age = function age() {}
复制代码

函数声明特色：AO上若是有与函数名同名的属性,则会被此函数覆盖。

由于函数在JS领域,也是变量的一种类型

分析阶段最终结果是：

AO.age = function age() {}
复制代码

2.1.2 执行阶段

2.2 例子二

function a(age) {
        console.log(age);
        var age = function () {
            console.log('25');
        }
    }
    a(18);
复制代码

2.2.1 分析阶段

第一步，分析函数参数：

形式参数：AO.age = undefined
实参：AO.age = 18
复制代码

第二步，分析变量声明：

// 第3行代码有函数表达式 var age = function () { console.log('25');}
// 但此前第一步中已有AO.age = 18, 有同名属性,不作任何事
即AO.age = 18
复制代码

第三步，分析函数声明（无）

分析阶段最终结果是：

AO.age = 18
复制代码

2.2.2 执行阶段

2.3 例子三

function a(age) {
        console.log(age);
        var age = function () {
            console.log(age);
        }
        age();
    }
a(18);
复制代码

2.3.1 分析阶段

第一步，分析函数参数：AO.age = 18

第二步，分析变量声明：有同名属性,不作任何事 AO.age = 18

第三步，分析函数声明（无）

分析阶段最终结果是：

AO.age = 18
复制代码

2.3.2 执行阶段

到这里，不少人会犯迷糊：age();不是应该输出18 吗？

代码执行到age();时，其实又会再分析 & 执行。

2.3.3 age()的分析&执行

// 分析阶段
建立AO对象，AO = {}
第一步，分析函数参数（无）
第二步，分析变量声明（无）
第三步，分析函数声明（无）
分析阶段最终结果是：AO = {}
复制代码

• 当age() 本身的AO对象，即age.AO是个空对象时，它会往上调用。
• 上一级的AO对象是a，即a.AO, a.AO下有个执行完后获得的a.AO.age = function(){console.log(age);}
• 输出 ƒ () { console.log(age); } `

2.4 执行总结：何为做用域链

JavaScript上每个函数执行时，会先在本身建立的AO上找对应属性值。若找不到则往父函数的AO上找，再找不到则再上一层的AO,直到找到大boss:window（全局做用域）。 而这一条造成的“AO链” 就是JavaScript中的做用域链。

3.LHS和RHS查询：做用域链的两大利器

LHS，RHS 这两个术语就是出如今引擎对变量进行查询的时候。在《你不知道的Javascript(上)》也有很清楚的描述。在这里，我想引用freecodecamp 上面的回答来解释：

LHS = 变量赋值或写入内存。想象为将文本文件保存到硬盘中。 RHS = 变量查找或从内存中读取。想象为从硬盘打开文本文件。 Learning Javascript, LHS RHS

3.1 二者的特性

• 都会在全部做用域中查询
• 严格模式下，找不到所需的变量时，引擎都会抛出ReferenceError异常。
• 非严格模式下，LHR稍微比较特殊: 会自动建立一个全局变量
• 查询成功时，若是对变量的值进行不合理的操做，好比：对一个非函数类型的值进行函数调用，引擎会抛出TypeError异常

3.2 拿书中的例子来说

function foo(a) {
    var b = a;
    return a + b;
}
var c = foo( 2 );
复制代码

直接看执行查找：

LHS(写入内存)：

c=, a=2(隐式变量分配), b=
复制代码

RHS(读取内存)：

读foo(2), = a, a ,b
(return a + b 时须要查找a和b)
复制代码

按 写入/读取内存来理解，是否是比书中的好理解多了？

3.3 关于LHS和RHS抛错

拿两个最简单的例子将：

3.3.1 不合理的操做

LHS执行查询阶段，本来查询成功，但将 a做用函数调用 a();，故引擎会抛出TypeError异常。

3.3.2 LHS抛错

LHS比较少见的状况是：不少时候咱们都没开启严格模式，即：“use strict”。 大家能够如今打开chrome调试工具，分别试下如下代码严格/非严格模式的输出：

“use strict”
function init(a){
  b=a+3;
}
init(2);    
console.log(b);
复制代码

3.3.3 RHS抛错

4. 做用域链口诀

这里咱们拿《你不知道的Javascript(上)》中的一张图解释：

我也总结了一个做用域链口诀，教你快速找到输出：

• 分析阶段创AO，参数看完找变量，变量不顶函数顶，顶完以后定乾坤。

• 执行阶段看LR，内层不行找外层，翻遍楼层找不到，抛个异常连连看。

感悟：

这几天摸爬滚打的找了不少资料，发现不少都讲得语焉不详。要么很是复杂，讲得贼深奥。要么就是粗略归纳，没有系统介绍。这也是为啥这么多将做用域与做用域链，却没一个完全看明白的缘由（大几率也是由于菜）

做者文章总集

• 「从源码中学习」完全理解Vue选项Props
• 「Vue实践」项目升级vue-cli3的正确姿式
• 「从源码中学习」Vue源码中的JS骚操做
• 为什么你始终理解不了JavaScript做用域链？

求一份深圳的内推

目前本人在准备跳槽，但愿各位大佬和HR小姐姐能够内推一份靠谱的深圳前端岗位!

• 微信：huab119
• 邮箱：454274033@qq.com