关于作用域和闭包——源自《你所不知道的JavaScript》

忘是亡心i 2022-09-27 15:21 179阅读 0赞

# 作用域 #

## 作用域初级解读 ##

作用域是一套规则，用以规定变量的存储和查找方式。  
在实际应用的时候，经常会发生作用域的嵌套，当JS引擎在当前作用域无法找到需要的变量时，就会顺着作用域链继续查找，直到找到变量或者到达了全局作用域，也就是最外层的作用域为止。

## LHS 和 RHS ##

“L”和“R”分别代表左侧和右侧，当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。  
讲得更准确一点，RHS 查询与简单地查找某个变量的值别无二致，而 LHS 查询则是试图找到变量的容器本身，从而可以对其赋值。从这个角度说，RHS 并不是真正意义上的“赋值操作的右侧”，更准确地说是“非左侧”。

如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。  
相较之下，当引擎执行 LHS 查询时，如果在顶层(全局作用域)中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非 “严格模式”下。

ES5 中引入了“严格模式”。同正常模式，或者说宽松 / 懒惰模式相比，严格模式在行为上有很多不同。其中一个不同的行为是严格模式禁止自动或隐式地创建全局变量。因此，在 严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询失败时类似的 ReferenceError 异常。

接下来，如果 RHS 查询找到了一个变量，但是你尝试对这个变量的值进行不合理的操作， 比如试图对一个非函数类型的值进行函数调用，或着引用 null 或 undefined 类型的值中的属性，那么引擎会抛出另外一种类型的异常，叫作 TypeError。

**ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对 结果的操作是非法或不合理的。**

# 词法作用域 #

在前面的内容中我们知道，“作用域”是一套规则，这套规则用来管理引擎如何在当前作用 域以及嵌套的子作用域中根据标识符名称进行变量查找。

作用域共有两种主要的工作模型。第一种是最为普遍的，被大多数编程语言所采用的词法作用域；另外一种叫作动态作用域，仍有一些编程语言在使用(比如 Bash 脚本、Perl 中的一些模式等)。

需要明确的是，事实上 JavaScript 并不具有动态作用域。它只有词法作用域，简单明了。

进入正题，首先解释一下词法：  
大部分标准语言编译器的第一个工作阶段叫作词法化(也叫单词化)。词法化的过程会对源代码中的字符进行检查，如果是有状态的解析过程，还会赋予单词语义。

简单地说，**词法作用域就是定义在词法阶段的作用域**。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变(大部分情况下是这样的)。

作用域的结构和互相之间的位置关系给引擎提供了足够的位置信息，引擎正是用这些信息来查找标识符的位置。  
作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以定义同名的标识符，这叫作“遮蔽效应”(内部的标识符“遮蔽”了外部的标识符)。

而对于一个函数来说，无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

## 欺骗词法 ##

如果词法作用域完全由写代码期间函数所声明的位置来定义，怎样才能在运行时来“修改”(也可以说欺骗)词法作用域呢?

JavaScript 中有两种机制来实现这个目的。社区普遍认为在代码中使用这两种机制并不是什么好注意。但是关于它们的争论通常会忽略掉最重要的点：欺骗词法作用域会导致性能下降。

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

2、with：可能导致变量泄漏到全局作用域中。

请注意：如果代码中大量使用 eval(..) 或 with，那么运行起来一定会变得非常慢。因为：JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。  
但如果引擎在代码中发现了 eval(..) 或 with，它只能简单地假设关于标识符位置的判断都是无效的，因为无法在词法分析阶段明确知道 eval(..) 会接收到什么代码，这些代码会如何对作用域进行修改，也无法知道传递给 with 用来创建新词法作用域的对象的内容到底是什么。最悲观的情况是如果出现了 eval(..) 或 with，所有的优化可能都是无意义的，因此最简单的做法就是完全不做任何优化。

# 函数作用域和块作用域 #

## 函数中的作用域 ##

是 JavaScript 具有基于函数的作用域，意味着每声明一个函数都会为其自身创建一个作用域。

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

## 隐藏内部实现 ##

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

有很多原因促成了这种基于作用域的隐藏方法。它们大都是从**最小特权原则**中引申出来的，也叫最小授权或最小暴露原则。这个原则是指在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

这样做的好处之一是可以规避冲突，避免变量被意外的改写和覆盖。

## 函数作用域 ##

当我们想使用一个函数把代码包裹起来的时候，其实也是存在问题的，比如，函数名也会污染全局作用域，还有，需要显示运行函数。

如果函数不需要函数名(或者至少函数名可以不污染所在作用域)，并且能够自动运行， 这将会更加理想。

解决方案：

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

首先，包装函数的声明以 (function… 而不仅是以 function… 开始。尽管看上去这并不 是一个很显眼的细节，但实际上却是非常重要的区别。**函数会被当作函数表达式而不是一 个标准的函数声明来处理。**

区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位置(不仅仅是一行代码，而是整个声明中的位置)。如果 function 是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。 比较一下前面两个代码片段。第一个片段中 foo 被绑定在所在作用域中，可以直接通过 foo() 来调用它。第二个片段中 foo 被绑定在函数表达式自身的函数中而不是所在作用域中。

换句话说，`(function foo(){ .. })`作为函数表达式意味着foo只能在 .. 所代表的位置中被访问，外部作用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

**1、匿名和具名**

函数表达式可以是匿名的，而函数声明则不可以省略函数名——在 JavaScript 的语法中这是非法的。

匿名函数表达式书写起来简单快捷，很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑。  
1. 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。  
2. 如果没有函数名，当函数需要引用自身时只能使用已经过期的arguments.callee引用， 比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。  
3. 匿名函数省略了对于代码可读性/可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。

**2、立即执行函数表达式IIFE(Immediately Invoked Function Expression)**

示例1
    (function IIFE() { 
        var a = 3; 
        console.log( a ); 
    })();

示例2
    (function IIFE() { 
        var a = 3; 
        console.log( a ); 
    }());

示例3
    (function IIFE( global ) {
        var a = 3;
        console.log( a ); 
        console.log( global.a ); 
    })( window );

## 块作用域 ##

**1、with：**

with 关键字不仅是一个难于理解的结构，同时也是块作用域的一个例子(块作用域的一种形式)，注意：**用 with 从对象中创建出的作用域仅在 with 声明中而非外部作用域中有效。**

**2、try/catch**

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

try {
        undefined(); // 执行一个非法操作来强制制造一个异常
    }catch (err) {
        console.log( err ); // 能够正常执行! 
    }
    console.log( err ); // ReferenceError: err not found

**3、let，const**

在使用let时需要注意，使用 let 进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不“存在”。

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

let将变量隐藏在了其声明所在的“块作用域”（\{…\}）之中。

另一个 let 可以发挥优势的典型例子就是 for 循环。

for (let i=0; i<10; i++) { 
        console.log( i );
    }
    console.log( i ); // ReferenceError

这样i就不会去污染全局变量了。

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

# 提升 #

关于提升，大家应该都比较熟悉了，就是说，在代码编译的过程中，变量和函数的声明会被提前到代码的最前面。因此，在js中函数的声明即使放在代码的最末端，运行也不会报错。

同理，这段代码也不会报错，但是输出的结果是undefined。

console.log( a );
    var a = 2;

原因是编译过程中，代码变成了这样：

var a; 
    console.log( a ); 
    a = 2;

也就是虽然有提升，但是只有声明本身会被提升，而赋值或其他运行逻辑会留在原地。