一周一章前端书·第1周：《你不知道的JavaScript(上)》S01E01

第1章：作用域是什么

• 我们通过var声明变量时，是否考虑过这些问题：
  • 这些变量都存储在哪里？
  • 程序用到它们时，又是怎么找到它们的？
• 而答案就是：不仅仅是JavaScript，任何编程语言都会设计一套良好的规则来存取变量，而这套规则就叫做 作用域。

1.1 编译原理

• 虽然和静态语言(比如Java)不同，JavaScript是“解释性”的动态语言。
• 但实际上，JavaScript代码在运行之前也是需要编译的，并且JavaScript引擎编译的步骤，和传统的编译语言非常相似，大致有以下三大步骤：

第1步：分词/词法分析（Tokenizing/Lexing）

• 任何.js文件在解析前，对于JS引擎而言都是一大段文本，不能直接运行。所以当务之急，就是将文本字符串“大卸八块”般的进行分解。
• 词法分析就是 将文本内容分解成有意义的词法字符串（token） 。
• 比如var a = 2;最终会分解成词法字符串数组，得到 [var、a、=、2、;]，而多余的空格则是无意义的。

第2步：解析/语法分析（Parsing）

• 语法分析则是 将词法字符串数组转换成 “抽象语法树”（Abstract Syntax Tree，AST）
• 比如代码var a = 2;会生成以下具有层次结构的对象

  /*变量声明的对象*/
  VariableDeclaration : {
    /*变量名为 a*/
    Identifier : a,
    /*变量赋值表达式*/
    AssignmentExpression : {
        /*数值类型为 2*/
        NumericLiteral : 2 
    }
  }
  

第3步：代码生成

• 最后一步就是生成代码， 将AST转换为可执行的机器指令 。
• 比如代码var a = 2;会创建一个变量a，并为其分配内存，然后将值2存进这个变量。

1.2 理解作用域

原书将引擎、编译器以及作用域模拟成三个演员，用来说明在执行一段代码时，三者分别负责的工作。但我稍微做一些改动，将作用域比喻成一个记录清单。

• 执行JS代码依赖三个东西：
  • 引擎：负责JS代码的编译和执行
  • 编译器：在引擎工作前，负责语法分析和代码生成
  • 作用域：一个具有严格的规则，专门负责收集并维护所有变量的清单列表，通过它来存取变量
• 阅读代码 var a = 2; 其实访问了两次作用域，一个是 在编译器编译时检查变量声明，一个是 引擎运行时检查使用：
  • 如上面所说的，第1步编译器会进行词法分析，第2步将词法单元解析成一个树结构的对象；
  • 在第3步生成代码时，编译器会去查找作用域，检查 是否存在同名的变量，如果没有则声明一个新的变量并赋值 ；
  • 最后引擎运行代码时，会再次通过作用域 检查 是否存在同名的变量，如果有则直接 使用，没有则继续向上查找
• 引擎执行代码到作用域查找变量，分为两种类型：RHS查询 和 LHS查询：
  • “L（left）”和“R（right）”分别代表变量处于表达式的左边还是右边；
  • RHS查询就是查找变量，可理解成retrieve his source value（找到它源值）。比如console.log(a)就是RHS查询，找到变量a的值传递给console.log()；
  • LHS查询则是查找变量的容器对其进行赋值。比如var a = 2;就是LHS查询，找到变量a并为它赋值= 2；
• 我们尝试用RHS查询和LHS查询的思维来阅读JS代码：

  function foo(a){
      console.log(a);
  }
  foo(2);
  

  我们都知道function声明函数的方式等同于，声明一个变量并为其赋值一个执行方法体：

  var foo = function(a){
      console.log(a);
  }
  foo(2);
  

  • var foo = function()这是一个LHS查询：声明foo变量并为其赋值一个方法；
  • foo(2)属于RHS查询：找到foo变量的值并执行它
  • 进到foo方法体中，实际上这里隐藏了一句代码a = 2;将传递的值赋值给形参
  • console.log(a)是RHS查询：找到a的值，传递给console.log(...)
  • 值得一提的是，console.log()本身也属于RHS查询，会去找寻log()方法的引用并执行它

1.3 作用域嵌套

• 不管是RHS查询还是LHS查询都从当前作用域开始，如果当前作用域无法找到变量时，引擎会转移到外层作用域中继续查找，直至转移到最顶层的作用域，也就是全局作用域。
• 举例：

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

  在foo方法体中，变量b在foo的作用域中找不到，将会到外层的全局作用域查找，最后输出4

1.4 异常

• 之所以 区分RHS和LHS，是因为当查找到未声明的变量时，这两种查询的行为是不一样的：
  • 如前文提到的，LHS查询失败时会在全局作用域创建一个同名的变量；
  • 而RHS查询失败时，则会抛出 ReferenceError异常；另一种情况是，查找到了变量，但是尝试对这个变量的值做不合理的操作（比如对一个非函数的变量进行调用），则抛出TypeError异常
  • 总而言之，RererenceError异常是作用域判别失败相关的， TypeError异常 则代表作用域判别成功了，但对结果的操作是非法或不合理的

1.5 小结

• 作用域是一套存取变量的规则；
• 在代码执行前，会先由编译器进行编译，JavaScript引擎在执行代码时会进行LHS查询和RHS查询：
  • LHS查询是对变量进行赋值，其中=操作符或者调用函数时传参的操作，都会导致相关作用域的赋值操作；
  • RHS查询是对变量的值进行查找；
• LHS和RHS查询都会从当前执行作用域开始，如果当前作用域找不到，就会往上级作用域继续查找，每次上升一级作用域，直至到顶级的全局作用域
• 不成功的RHS查询会抛出Reference异常，而不成功的LHS查询会自动式地创建一个全局变量