重读你不知道的JS (上) 第一节三章

你不知道的JS(上卷)笔记

你不知道的 JavaScript

JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 JavaScript 开发者，如果没有认真学习的话也无法真正理解它们.

上卷包括俩节：

• 作用域和闭包
• this 和对象原型

作用域和闭包

希望 Kyle 对 JavaScript 工作原理每一个细节的批判性思 考会渗透到你的思考过程和日常工作中。知其然，也要知其所以然。

函数作用域和块作用域

正如我们在第 2 章中讨论的那样，作用域包含了一系列的“气泡”，每一个都可以作为容 器，其中包含了标识符(变量、函数)的定义。这些气泡互相嵌套并且整齐地排列成蜂窝 型，排列的结构是在写代码时定义的。

但是，究竟是什么生成了一个新的气泡?只有函数会生成新的气泡吗? JavaScript 中的其 他结构能生成作用域气泡吗?

函数中的作用域

1. JavaScript 具有基于函数的作用域；
2. 无论标识符 声明出现在作用域中的何处，这个标识符所代表的变量或函数都将附属于所处作用域的气 泡。

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

这种设计方案是非常有用的，能充分利用 JavaScript 变量可以根据需要改变值类型的“动态”特性。 这是什么意思？

隐藏的内部实现

可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域 来“隐藏”它们。

Q: 为什么“隐藏”变量和函数是一个有用的技术?

A: 大都是从最小特权原则中引申出来 的，也叫最小授权或最小暴露原则。这个原则是指在软件设计中，应该最小限度地暴露必 要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

• 设计上将具体内容私有化了，设计良好的软件都会 依此进行实现。

规避冲突

1. 全局命名空间
   通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象 被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象(命名空间)的属 性，而不是将自己的标识符暴漏在顶级的词法作用域中。
2. 模块管理
   任何库都无需将标识符加入到全局作用域中，而是通过依赖管理器 的机制将库的标识符显式地导入到另外一个特定的作用域中。

• 避免同名标识符之间的冲突

函数作用域

在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐

藏”起来，外部作用域无法访问包装函数内部的任何内容。

这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题:

• 必须声明一个具名函数 foo()，意味着 foo 这个名称本身“污染”了所在作用域(在这个 例子中是全局作用域)
• 必须显式地通过函数名(foo())调用这个函数才能运行其 中的代码。

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

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

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。

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

片段中 foo 被绑定在函数表达式自身的函数中而不是所在作用域中。

类似的还有于 +function foo() {}() 对函数求值的操作，都能做到避免泄露

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

匿名和具名

setTimeout( function() {
         console.log("I waited 1 second!");
}, 1000 );

这叫做匿名函数表达式， 因为function()没有名称标识符。函数表达式可以是匿名的，而函数声明则不可以省略函数名.

匿名函数表达式写起来简单快捷，但是它有几个缺点需要考虑：

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

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

始终给函数表达式命名是一个最佳实践。

setTimeout( function timeoutHandler() { // <-- 快看，我有名字了!
  console.log( "I waited 1 second!" );
}, 1000 );

立即执行函数表达式

几年前社区给它规定了一个术语:IIFE，代表立即执行函数表达式 (Immediately Invoked Function Expression);

IIFE的形式有下面俩种：

(function(){ .. })()

(function(){ .. }())

• 用法1， 把它们当作函数调用并传递参数进去

  例如:

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

  我们将 window 对象的引用传递进去，但将参数命名为 global，因此在代码风格上对全局 对象的引用变得比引用一个没有“全局”字样的变量更加清晰。当然可以从外部作用域传 递任何你需要的东西，并将变量命名为任何你觉得合适的名字。这对于改进代码风格是非 常有帮助的。

• 用法2，解决 undefined 标识符的默认值被错误覆盖导致的异常(虽 然不常见)。

  例如：将一个参数命名为 undefined，但是在对应的位置不传入任何值，这样就可以 保证在代码块中 undefined 标识符的值真的是 undefined:

  undefined = true; // 给其他代码挖了一个大坑!绝对不要这样做!

  (function IIFE( undefined ) {

  var a;

  if (a === undefined) {

  console.log( "Undefined is safe here!" );

  }

  })();

• 用法3：倒置代码的运行顺序

  例如：将需要运行的函数放在第二位，在 IIFE 执行之后当作参数传递进去。这种模式在 UMD(Universal Module Definition)项目中被广 泛使用。尽管这种模式略显冗长，但有些人认为它更易理解。

  var a = 2;
  (function IIFE( def ) {
    def( window );
  })(function def( global ) {
    var a = 3;
    console.log( a ); // 3 
    console.log( global.a ); // 2
  });

块作用域

块作用域的用处：变量的声明应该距离使用的地方越近越好，并最大限度地本地化。

块作用域是一个用来对之前的最小授权原则进行扩展的工具，将代码从在函数中隐藏信息 扩展为在块中隐藏信息。

为什么要把一个只在 for 循环内部使用(至少是应该只在内部使用)的变量 i 污染到整个

函数作用域中呢?

可惜，表面上看 JavaScript 并没有块作用域的相关功能。

with

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

try/catch

非常少有人会注意到 JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会创建一个块作

用域，其中声明的变量仅在 catch 内部有效。

例如:

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

尽管这个行为已经被标准化，并且被大部分的标准 JavaScript 环境(除了老 版本的 IE 浏览器)所支持，但是当同一个作用域中的两个或多个 catch 分句 用同样的标识符名称声明错误变量时，很多静态检查 工具 还是会发出警告。 实际上这并不是重复定义，因为所有变量都被安全地限制在块作用域内部， 但是静态检查工具还是会很烦人地发出警告。为了避免这个不必要的警告，很多开发者会将 catch 的参数命名为 err1、 err2 等。也有开发者干脆关闭了静态检查工具对重复变量名的检查。

let

ES6 改变了现状，引入了新的 let 关键字，提供了除 var 以外的另一种变量声明方式。

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

ES6中的if表达式中的{}并不具备块级作用域的划分，仅仅只能表明一个语句块，因为要在其中声明块级作用域变量还需要let来辅助。

let 关键字可以将变量绑定到所在的任意作用域中(通常是 { .. } 内部)。换句话说，let为其声明的变量隐式地了所在的块作用域。

在开发和修改代码的过 程中，如果没有密切关注哪些块作用域中有绑定的变量，并且习惯性地移动这些块或者将 其包含在其他的块中，就会导致代码变得混乱。

为块作用域显式地创建块可以部分解决这个问题，使变量的附属关系变得更加清晰。通常 来讲，显式的代码优于隐式或一些精巧但不清晰的代码。显式的块作用域风格非常容易书 写，并且和其他语言中块作用域的工作原理一致:

var foo = true;
if (foo) {
  { // <-- 显式的快
    let bar = foo * 2;
    bar = something( bar );
    console.log( bar );
  }
}
console.log( bar ); // ReferenceError

只要声明是有效的，在声明中的任意位置都可以使用 { .. } 括号来为 let 创建一个用于绑 定的块。在这个例子中，我们在 if 声明内部显式地创建了一个块，如果需要对其进行重 构，整个块都可以被方便地移动而不会对外部 if 声明的位置和语义产生任何影响。

垃圾收集

另一个块作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。

function process(data) {
// 在这里做点有趣的事情
}
var someReallyBigData = { .. };
process( someReallyBigData );
var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt) {
  console.log("button clicked");
}, /*capturingPhase=*/false );

click 函数的点击回调并不需要 someReallyBigData 变量。理论上这意味着当 process(..) 执 行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于 click 函数形成 了一个覆盖整个作用域的闭包，JavaScript 引擎极有可能依然保存着这个结构(取决于具体 实现)。

块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存 someReallyBigData 了:

function process(data) {

// 在这里做点有趣的事情

}

// 在这个块中定义的内容可以销毁了!

{

let someReallyBigData = { .. };

process( someReallyBigData );

}

var btn = document.getElementById( "my_button" );

btn.addEventListener( "click", function click(evt){

console.log("button clicked");

}, / capturingPhase= /false );

为变量显式声明块作用域，并对变量进行本地绑定是非常有用的工具，可以把它添加到你

的代码工具箱中了。

let循环

for 循环头部的 let 不仅将 i 绑定到了 for 循环的块中，事实上它将其重新绑定到了循环 的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值。

每个迭代进行重新绑定的原因非常有趣，我们会在第 5 章讨论闭包时进行说明。

const

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

小结

函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。 但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块(通常指 { .. } 内部)。

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

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

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