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

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

你不知道的 JavaScript

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

上卷包括俩节：

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

作用域和闭包

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

作用域闭包

启示

秘诀： JavaScript中闭包无处不在，你只需要能够识别并拥抱它。

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

闭包的创建和使用在你的代码中随处可见。

你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境。

实质问题

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

词法作用域的查找规则是闭包的一部分。

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

纯学术的角度上说，上述代码片段中，函数 bar() 具有一个涵盖 foo() 作用域的闭包 (事实上，涵盖了它能访问的所有作用域，比如全局作用域)。也可以认为 bar() 被封闭在了 foo() 的作用域中。为什么呢?原因简单明了，因为 bar() 嵌套在 foo() 内部。

闭包使得函数可以继续访问定义时的词法作用域。

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

思考：

function foo() {
  var a = 2;
  function baz() {
    console.log( a, b ); // 2 , b能获取到1吗？
  }
  bar( baz );
}
function bar(fn) {
  var b = 1;
  fn(); // 妈妈快看呀，这就是闭包!
}

常见的闭包场景

function wait(message) {
  setTimeout( function timer() { // timer函数由引擎调用，但是已经超出了wait作用域，所以存在闭包
      console.log( message );
  }, 1000 );
}
wait( "Hello, closure!" );

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

IIFE闭包

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

尽管 IIFE 本身并不是观察闭包的恰当例子，但它的确创建了闭包，并且也是最常用来创建 可以被封闭起来的闭包的工具。因此 IIFE 的确同闭包息息相关，即使本身并不会真的使用 闭包。

循环和闭包

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

延迟函数的回调会在循环结束时才执行。事实上， 当定时器运行时即使每个迭代中执行的是setTimeout(.., 0)，所有的回调函数依然是在循 环结束后才会被执行，因此会每次输出一个 6 出来。

缺陷是我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是 根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的， 但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。

这样说的话，当然所有函数共享一个 i 的引用。

它需要有自己的变量，用来在每个迭代中储存 i 的值:

for (var i=1; i<=5; i++) { 
  (function() { // IIFE 每次执行都会立即创建一个词法上的函数作用域
    var j = i; // 闭包作用域的变量j, 立即得到i的值 
    setTimeout( function timer() {
                 console.log( j ); // 访问闭包作用域的变量j
             }, j*1000 );
  })();
}

变体：

for (var i=1; i<=5; i++) {
  (function(j) { // IIFE 每次执行都会立即创建一个词法上的函数作用域
    // 闭包作用域的变量j, 参数传递立即得到i的值
    setTimeout( function timer() {
                 console.log( j ); // 访问闭包作用域的变量j
             }, j*1000 );
  })(i);
}

块作用域和闭包

let 声明，可以用来劫 持块作用域，并且在这个块作用域中声明一个变量。

而上面的IIFE创建一个闭包，本质上这是将一个块转换成一个可以被关闭的作用域。

结合块级作用域与闭包：

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

模块

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() { 
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
  return {
    doSomething1: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule(); 
foo.doSomething1(); // cool
foo.doAnother(); // 1 ! 2 ! 3

这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为模块暴露， 这里展示的是其变体。

doSomething() 和 doAnother() 函数具有涵盖模块实例内部作用域的闭包(通过调用 CoolModule() 实现)。

当通过返回一个含有属性引用的对象的方式来将函数传递到词法作 用域外部时，我们已经创造了可以观察和实践闭包的条件。

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

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

一个具有函数属性的对象本身并不是真正的模块。从方便观察的角度看，一个从函数调用 所返回的，只有数据属性而没有闭包函数的对象并不是真正的模块。

模块模式另一个简单但强大的变化用法是，命名将要作为公共 API 返回的对象:

在上述模块中，dosomething1被作为模块内部dosomething的公开访问名。

现代的模块机制

var MyModules = (function Manager() { // 模块 管理器/依赖加载器
  var modules = {};
  function define(name, deps, impl) {
    for (var i=0; i<deps.length; i++) {
      deps[i] = modules[deps[i]];
    }
    modules[name] = impl.apply( impl, deps );
  }
  function get(name) { 
    return modules[name];
  }
  return {
    define: define,
    get: get 
  };
})();


// module bar 定义
MyModules.define( "bar", [], function() { 
  function hello(who) {
    return "Let me introduce: " + who; 
  }
  return {
    hello: hello
  };
});

// module foo 定义 依赖 bar 模块
MyModules.define( "foo", ["bar"], function(bar) {
  var hungry = "hippo";
  function awesome() {
    console.log( bar.hello( hungry ).toUpperCase() );
  }
  return {
    awesome: awesome
  };
});
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(bar.hello( "hippo" )); // Let me introduce: hippo 
foo.awesome(); // LET ME INTRODUCE: HIPPO

未来的模块机制

基于函数的模块并不是一个能被稳定识别的模式(编译器无法识别)，它们 的 API 语义只有在运行时才会被考虑进来。因此可以在运行时修改一个模块 的 API。

相比之下，ES6 模块 API 更加稳定(API 不会在运行时改变)。由于编辑器知 道这一点，因此可以在(的确也这样做了)编译期检查对导入模块的 API 成 员的引用是否真实存在。如果 API 引用并不存在，编译器会在运行时抛出一 个或多个“早期”错误，而不会像往常一样在运行期采用动态的解决方案。

ES6 的模块没有“行内”格式，必须被定义在独立的文件中(一个文件一个模块)。浏览 器或引擎有一个默认的“模块加载器”(可以被重载，但这远超出了我们的讨论范围)可 以在导入模块时异步地加载模块文件。

小结

闭包就好像从 JavaScript 中分离出来的一个充满神秘色彩的未开化世界，只有最勇敢的人 才能够到达那里。但实际上它只是一个标准，显然就是关于如何在函数作为值按需传递的 词法环境中书写代码的。

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

如果没能认出闭包，也不了解它的工作原理，在使用它的过程中就很容易犯错，比如在循 环中。但同时闭包也是一个非常强大的工具，可以用多种形式来实现模块等模式。

模块有两个主要特征:

(1)为创建内部作用域而调用了一个包装函数;

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

现在我们会发现代码中到处都有闭包存在，并且我们能够识别闭包然后用它来做一些有用 的事!