如何理解JavaScript中的作用域

什么是变量，什么是作用域？

变量：简单来说就是在特定时间内保存特定值的一个名字而已，由于不存在定义某个变量必须要保存某种数据类型值的规则，所以变量的值及其数据类型可以在脚本生命周期内任意改变，变量可能包含两种不同的数据类型得值：基本类型值和引用类型值。基本数据类型包括：Undedind、Null、Boolean、Number、String和Symbol(es6新增)，同时Boolean、Number、String和Symbol也叫基本包装类型。引用类型：简单来说，除了所有基本类型剩下的就是引用类型了。可能不严谨，先这样对付看吧。

作用域：我们已经知道了变量的作用其实就是存储值，那么我们要怎么样才能对值进行访问或者修改？换句话说，这些变量住在哪里呢，更重要的是我们（程序）要如何找到他们？像莎士比亚说得那样：To be, or not to be: that is the question！所以我们需要一套设计良好的规则来存储变量，并且可以方便的找到这些变量，这套规则就叫作用域！

编译原理

　　　　在了解作用于规则前，我们先要知道编译原理，即我们的代码写下之后是怎么工作的。在强类型语言中，程序中要执行一段源代码首先要经过编译，编译过程有三个步骤：

　　　　　　1、分词/词法分析。这个过程将字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元，例如 var a = 2；这段代码通常会被分解成为下面这些词法单元：var、a、=、2、；。空格是否被当作词法单元取决于空格对于这门语言是否有意义。

　　　　　　2、解析/语法分析。这个过程是将词法单元数组转换成一个由元素逐级嵌套所组成的代表程序语法结构的树，叫“抽象语法树”（Abstract Syntax Tree,AST）。简单来说，对于编程语言下的源代码，通过构建语法树的形式将源代码中的代码映射到树中的每一个节点上。

　　　　　　3、代码生成。将AST（抽象语法树）转换为可执行的代码这一过程叫做代码生成。简单来说就是将 var a = 2;的AST转化成机器能认识的指令，创建一个变量a，然后他的值2储存在a中。

　　　　　比起那些编译过程只有三个步骤的编译器，JavaScript引擎要复杂的多，在语法分析和代码生成阶段有特定的步骤来对性能进行优化，包括对冗余元素进行优化等，具体有哪些步骤，我也不知道，因为编译原理这段内容是摘抄《《你不知道的JavaScirpt 上卷》》书中的原话，哈哈哈，是不是很吃精！！！JS的编译大部分发生在代码执行前的，并且编译完成马上执行。

　　理解作用域

　　　　请看var a = 2;这段代码，正常人会认为这是一句生明，因为语句中没有‘，’或者’。‘等语句分隔符号，但是在JS引擎中认为这里有两个声明：变量生命和赋值生明。首先是词法分析过程，将var a = 2；分解成词法单元，然后语法分析生成抽象语法树，最后执行代码。具体一点说，var a = 2；会分解成var a 和a = 2;当编译器遇到var a,时，编译器会询问作用域是否已经存在一个该名称的变量存于同一个作用域中，如果是则会忽略该生明（es6中新增的let和const情况有点不太一样），如果没有存在，则在当前作用域中生命一个新的变量，命名为a。接下来编译器会为引擎生成运行时所需要的代码，这段代码来处理a=2这个赋值操作。引擎运行时首先会在当前作用域中查找是否有一个叫做a的变量，如果有就赋值，如果没有就继续向上一级作用域查找，如果实在是找不到，找到了作用域顶层全局作用域也找不到，那么就会抛出一个错误。所以变量赋值操作总会执行两个步骤，如果变量未声明则在当前作用域中生名一个变量（严格模式下如果给未声明的变量赋值会报错），然后运行时引擎会在作用域中查找改变量，如果找到了就进行赋值。

扫描二维码关注公众号，回复： 2005567 查看本文章

　　作用域嵌套

　　　　作用域是怎么形成的呢？简单来讲就是执行环境所决定的，每一个执行环境都有一个与之关联的变量对象，环境内的所有变量和函数都保存在这个对象中，在全局环境下执行保存在全局的变量对象中叫全局作用域，在函数内的变量保存在函数内部的变量对象构成局部作用域。当代码在一个环境中执行时，会创建变量对象的一个作用域链，作用域链的前端始终都是当前代码所在环境的变量对象中。编译器在查找变量时就是沿着作用域链一级一级地搜索标识的过程，直到全局执行环境也就是全局作用域为止。当一个作用域嵌套在另一个作用域中，就发生了作用域嵌套，因此在当前作用域中无法找到某个变量时，引擎就会沿着作用域链在外层嵌套的作用域中查找，知道找到该变量或者在作用域链顶端（全局作用域）为止。如下：

function foo(a){
    console.log(a+b);
}
var b = 2;
foo(2); // 4

这段代码中，引擎首先会在foo函数中问foo的作用域，你见过b吗？foo作用域：没见过，滚犊子。然后引擎沿着作用域链往上爬，爬到了全局作用域中，然后问：全局作用域大哥你见过b吗？全局作用域：嗯我见过，给你吧。

嵌套作用域规则很简单，就是在当前作用域开始，一级一级地向上查找。直到抵达最外层全局作用域，查找过程就会停止！

之前说过，变量在赋值操作前总是会先查找然后再赋值，如果在非严格模式下，查找不到所要赋值的变量，全局作用域中会隐式的创建一个具有该名称的变量并返回给引擎。如下：

function foo(a){
    console.log(a+b);
    b = a;
}
foo(2); // 4

OK。