重读你不知道的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)包装函数的返回 值必须至少包括一个对内部函数的引用，这样就会建立涵盖整个包装函数内部做用域的闭 包。

如今咱们会发现代码中处处都有闭包存在，而且咱们可以识别闭包而后用它来作一些有用 的事!