《你不知道的JS》（上卷）：作用域和闭包

车吾
268 阅读19分钟

前言

在经历上一轮面试之后，得到朋友的推荐，看了红宝书，突然感觉很多问题明了很多！作为JS方面的两大神书，怎么能落下《你不知道的JS》呢！从今天开始，基于自己的情况，准备暂时先过一下本书的上卷和中卷。冲哇~~~

本系列内容摘抄或总结自《你不知道的JavaScript》（上卷）

一、作用域是什么

1、编译原理

  • 尽管通常将 JavaScript 归类为“动态”或“解释执行”语言，但事实上它是一门编译语言。

  • 在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为“编 译”。

    • 分词/词法分析（Tokenizing/Lexing)：这个过程会将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代 码块被称为词法单元（token）。
    • 解析/语法分析（Parsing)：将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法 结构的树（抽象语法树AST）
    • 代码生成：将 AST 转换为可执行代码的过程称被称为代码生成。

  • 比起那些编译过程只有三个步骤的语言的编译器，JavaScript 引擎要复杂得多。

    • 在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化
    • JavaScript 引擎不会有大量的（像其他语言编译器那么多的）时间用来进行优化，因为与其他语言不同，JavaScript 的编译过程不是发生在构建之前的。
    • 大部分情况下编译发生在代码执行前的几微秒（甚至更短！）的时 间内。

2、理解作用域

2.1 演员表

  • 引擎:从头到尾负责整个 JavaScript 程序的编译及执行过程。
  • 编译器:负责语法分析及代码生成等。
  • 作用域：负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

2.2 对话

var a = 2;

编译器的处理过程：

  • var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为 a。
  • 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。
  • 引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的变量。如果是，引擎就会使用这个变量；如果否，引擎会继续查找该变量。如果最终找不到的话会抛出一个异常。

总结：变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对 它赋值。

2.3 编译器有话说

上述案例中，引擎会为变量 a 进行 LHS 查询。另外一个查找的类型叫作 RHS。

赋值操作的左侧和右侧:

  • RHS( retrieve his source value) 查询与简单地查找某个变量的值别无二致，而 LHS 查询则是试图 找到变量的容器本身，从而可以对其赋值。

2.4 引擎和作用域的对话

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

引擎：我说作用域，我需要为foo进行RHS引用。你见过它吗？

作用域：别说，我还真见过，编译器那小子刚刚声明了它。它是一个函数，给你。

引擎：哥们太够意思了！好吧，我来执行一下foo。

引擎：作用域，还有个事儿。我需要为a进行LHS引用，这个你见过吗？

作用域：这个也见过，编译器最近把它声名为foo的一个形式参数了，拿去吧。

引擎：大恩不言谢，你总是这么棒。现在我要把2赋值给a。

引擎：哥们，不好意思又来打扰你。我要为console进行RHS引用，你见过它吗？

作用域：咱俩谁跟谁啊，再说我就是干这个。这个我也有，console 是个内置对象。 给你。

引擎：么么哒。我得看看这里面是不是有log(..)。太好了，找到了，是一个函数。

引擎：哥们，能帮我再找一下对a的RHS引用吗？虽然我记得它，但想再确认一次。

作用域：放心吧，这个变量没有变动过，拿走，不谢。

引擎：真棒。我来把a的值，也就是2，传递进log(..)。

3、作用域嵌套

遍历嵌套作用域链的规则很简单： 引擎从当前的执行作用域开始查找变量，如果找不到， 就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没找到，查找过程都 会停止。

LHS 和 RHS 引用都会在当前楼层进行查找,如果没找到就会往上层作用域查找，一次递进，最终在全局作用域时不管找到没找到都会停止。

4、异常

  • 如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。值得注意的是，ReferenceError 是非常重要的异常类型。
  • 当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量， 全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非 “严格模式”下。
  • 严格模式禁止自动或隐式地创建全局变量。因此，在 严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询 失败时类似的 ReferenceError 异常。
  • 如果 RHS 查询找到了一个变量，但是你尝试对这个变量的值进行不合理的操作， 比如试图对一个非函数类型的值进行函数调用，或着引用 null 或 undefined 类型的值中的 属性，那么引擎会抛出另外一种类型的异常，叫作 TypeError。
  • ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对 结果的操作是非法或不合理的。

5、小结

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对 变量进行赋值，那么就会使用 LHS 查询；如果目的是获取变量的值，就会使用 RHS 查询。

赋值操作符会导致 LHS 查询。＝操作符或调用函数时传入参数的操作都会导致关联作用域 的赋值操作。

LHS 和 RHS 查询都会在当前执行作用域中开始，如果有需要（也就是说它们没有找到所 需的标识符），就会向上级作用域继续查找目标标识符，这样每次上升一级作用域（一层 楼），最后抵达全局作用域（顶层），无论找到或没找到都将停止。

不成功的 RHS 引用会导致抛出 ReferenceError 异常。不成功的 LHS 引用会导致自动隐式地创建一个全局变量（非严格模式下），该变量使用 LHS 引用的目标作为标识符，或者抛 出 ReferenceError 异常（严格模式下）。

二、词法作用域

在上面一节当中我们说到大部分语言编译器的第一个工作阶段叫做词法化（也叫单词化）。

1、词法阶段

简单来说，词法作用域就是定义在词法阶段的作用域。也意味着词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变。

  • 1包含着整个全局作用域，其中只有一个标识符：foo。
  • 2包含着 foo 所创建的作用域，其中有三个标识符：a、bar 和 b。
  • 3包含着 bar 所创建的作用域，其中只有一个标识符：c。

全局变量会自动成为全局对象（比如浏览器中的window对象）的属性，因此可以不直接通过全局对象的词法名称，而是间接地通过对全局对象属性的引 用来对其进行访问。

2、欺骗词法

欺骗词法作用域会导致性能 下降。

2.1 eval

JavaScript 中的 eval(..) 函数可以接受一个字符串为参数，并将其中的内容视为好像在书 写时就存在于程序中这个位置的代码。

function foo(str, a) {   
    eval( str ); // 欺骗！ 
    console.log( a, b ); 
}  
var b = 2;  
foo( "var b = 3;", 1 ); // 1, 3

eval(..) 调用中的 "var b = 3;" 这段代码会被当作本来就在那里一样来处理。所以尽管之前代码中声明过了b变量，但是这里在内部创建了一个变量b，并遮蔽了外部（全局）作用域中的同名变量。

在严格模式的程序中，eval(..) 在运行时有其自己的词法作用域，意味着其 中的声明无法修改所在的作用域。

function foo(str) {      
    "use strict";        
    eval( str );        
    console.log( a ); // ReferenceError: a is not defined
}  
    foo( "var a = 2" );

在程序中动态生成代码的使用场景非常罕见，因为它所带来的好处无法抵消性能上的损失。

2.2 with

with 通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象 本身。

eval(..) 函数如果接受了含有一个或多个声明的代码，就会修改其所处的词法作用域，而 with 声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域。

2.3 性能

  • JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的 词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到 标识符。

  • 但如果引擎在代码中发现了 eval(..) 或 with，它只能简单地假设关于标识符位置的判断 都是无效的，因为无法在词法分析阶段明确知道 eval(..) 会接收到什么代码，这些代码会 如何对作用域进行修改，也无法知道传递给 with 用来创建新词法作用域的对象的内容到底 是什么。

  • 最悲观的情况是如果出现了 eval(..) 或 with，所有的优化可能都是无意义的，因此最简 单的做法就是完全不做任何优化。

3、小结

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段 基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它 们进行查找。

JavaScript 中有两个机制可以“欺骗”词法作用域：eval(..) 和 with。前者可以对一段包 含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在 运行时）。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作 用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认 为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。

三、函数作用域和块作用域

1、函数中的作用域

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复 用（事实上在嵌套的作用域中也可以使用）

2、隐藏内部实现

对函数的传统认知就是先声明一个函数，然后再向里面添加代码。但反过来想也可以带来一些启示：从所写的代码中挑选出一个任意的片段，然后用函数声明对它进行包装，实际上就是把这些代码“隐藏”起来了。

  • 变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时，如果它 们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。
  • 另外一种避免冲突的办法和现代的模块机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标识符加入到全局作用域中，而是通过依赖管理器的机制将库的标识符显式地导入到另外一个特定的作用域中。

3、函数作用域

通过将变量放入函数进行包装的方式可以解决作用域的冲突问题，但是并不理想，因为产生了新的函数名污染了作用域。于是提出以下方法：

var a = 2; 
(function foo(){ // <-- 添加这一行
    var a = 3;     
    console.log( a ); // 3  
})(); // <-- 以及这一行  
console.log( a ); // 2

以上这样的方式当中函数会被当作函数表达式而不是一个标准的函数声明来处理。

  • 函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。
  • (function foo(){ .. }) 作为函数表达式意味着 foo 只能在 .. 所代表的位置中被访问，外部作用域则不行。foo变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

3.1 匿名和具名

匿名函数表达式书写起来简单快捷，很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑。

  • 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
  • 如果没有函数名，当函数需要引用自身时只能使用已经过期的 arguments.callee 引用， 比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
  • 匿名函数省略了对于代码可读性 / 可理解性很重要的函数名。一个描述性的名称可以让 代码不言自明。

行内函数表达式非常强大且有用——匿名和具名之间的区别并不会对这点有任何影响。给函 数表达式指定一个函数名可以有效解决以上问题。

3.2 立即执行函数表达式

表立即执行函数表达式

比如 (function foo(){ .. })().
第一个 ()将函数变成表达式，第二个 ( ) 执行了这个函数。

改进的形式：(function(){ .. }())

4、块作用域

4.1 with

用 with 从对象中创建出的作用域仅在 with 声明中而非外 部作用域中有效。

4.2 try/catch

ES3 规范中规定 try/catch 的 catch 分句会创建一个块作 用域，其中声明的变量仅在 catch 内部有效。

4.3 let

ES6 引入了新的 let 关键字，提供了除 var 以外的另一种变量声明方式。 let 关键字可以将变量绑定到所在的任意作用域中（通常是 { .. } 内部）。换句话说，let 为其声明的变量隐式地了所在的块作用域。

var foo = true;  
if (foo) {   
    let bar = foo * 2;    
    bar = something( bar );  
    console.log( bar ); 
}  
console.log( bar ); // ReferenceError

4.4 const

除了 let 以外，ES6 还引入了 const，同样可以用来创建块作用域变量，但其值是固定的 （常量）。之后任何试图修改值的操作都会引起错误。

5、小结

  • 函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会 在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。

  • 但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域， 也可以属于某个代码块（通常指 { .. } 内部）。

  • 从 ES3 开始，try/catch 结构在 catch 分句中具有块作用域。

  • 在 ES6 中引入了 let 关键字（var 关键字的表亲），用来在任意代码块中声明变量。if (..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量，并且将变量添加到这个块 中。

  • 有些人认为块作用域不应该完全作为函数作用域的替代方案。两种功能应该同时存在，开 发者可以并且也应该根据需要选择使用何种作用域，创造可读、可维护的优良代码。

四、提升

1、编译器

引擎会 在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。也正是词法作用域 的核心内容。

包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理

示例

//代码一
a = 2;  
var a;  
console.log( a );

//代码二
console.log( a );  
var a = 2;

// 代码一实际执行顺序
var a;  
a = 2;  
console.log( a ); // 2
// 代码二实际执行顺序
var a;  
console.log( a );  // undefined
a = 2;

这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动” 到了最上面。这个过程就叫作提升。

  • 函数声明会被提升，但是函数表达式却不会被提升。

2、函数优先

  • 函数声明和变量声明都会被提升。但是一个值得注意的细节（这个细节可以出现在有多个 “重复”声明的代码中）是函数会首先被提升，然后才是变量。

  • 尽管重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。

3、小结

  • 我们习惯将 var a = 2; 看作一个声明，而实际上 JavaScript 引擎并不这么认为。它将 var a 和 a = 2 当作两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。

  • 这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。 可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的 最顶端，这个过程被称为提升。

  • 声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。

五、作用域闭包

1、启示

闭包是基于词法作用域书写代码时所产生的自然结果，你甚至不需要为了利用它们而有意 识地创建闭包。

2、实质问题

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用 域之外执行。

function foo() {   
    var a = 2;  
    function bar() {  
        console.log( a );  
    }  
    return bar; 
}  
var baz = foo();  
baz(); // 2 —— 朋友，这就是闭包的效果。

var fn;  
function foo() {    
    var a = 2;  
    function baz() {     
        console.log( a );  
    }  
    fn = baz; // 将 baz 分配给全局变量 
}  
function bar() {    
    fn(); //闭包
}  
foo();  
bar(); // 2

无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用 域的引用，无论在何处执行这个函数都会使用闭包。

3、现在我懂了

  • 在定时器、事件监听器、 Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步（或者同步）任务中，只要使 用了回调函数，实际上就是在使用闭包！

4、循环和闭包

for (var i=1; i<=5; i++) {
    (function(j) {   
        setTimeout(function timer() {  
            console.log( j);     
        }, j*1000 );  
    })( i ); 
}

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {   
        console.log( i );
    }, i*1000 );
}

5、模块

模块模式需要具备两个必要条件:

  • 必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块 实例）。
  • 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并 且可以访问或者修改私有的状态。

ES6 中为模块增加了一级语法支持。但通过模块系统进行加载时，ES6 会将文件当作独立 的模块来处理。每个模块都可以导入其他模块或特定的 API 成员，同样也可以导出自己的 API 成员。

ES6 的模块没有“行内”格式，必须被定义在独立的文件中（一个文件一个模块）。浏览 器或引擎有一个默认的“模块加载器”（可以被重载）可 以在导入模块时异步地加载模块文件。

6、小结

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

闭包是一个非常强大的工具，可以用多种形式来实现模块等模式。

模块有两个主要特征：

（1）为创建内部作用域而调用了一个包装函数；

（2）包装函数的返回 值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭 包。

恭喜你看完本部分啦！喜欢的话点个赞哇！加油加油！欢迎再看我的其他笔记哦！

avatar
文章
阅读
粉丝