重新学习 JavaScript 中的 作用域和闭包

作用域

几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。

但是将变量引入程序会引起几个很有意思的问题：这些变量储存在哪里？最重要的是，程序需要时如何找到它们？

这些问题说明需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域。

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

编译原理

传统编译步骤：

1. 分词/词法分析 （Tokenizing/Lexing）

   • 将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）
   • 如 var a = 2;,通常会被分解成为下面这些词法单元：var 、a 、= 、2 、;

2. 解析/语法分析 （Parsing）

   • 将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树——“抽象语法树”（Abstract Syntax Tree，AST）。

3. 代码生成

   • 将 AST 转换为可执行代码
   • 这个过程与语言、目标平台等息息相关

{
  "type": "Program",
  "start": 0,
  "end": 10,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 10,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 9,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 5,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 8,
            "end": 9,
            "value": 2,
            "raw": "2"
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "module"
}

比起那些编译过程只有 三个步骤的语言的编译器，JavaScript 引擎要复杂得多。JavaScript 引擎不会有大量的（像其他语言编译器那么多的）时间用来进行优化，因为与其他语言不同，JavaScript 的编译过程不是发生在构建之前的。

对于 JavaScript 来说，大部分情况下编译发生在代码执行前的几微秒（甚至更短！）的时间内。在作用域背后，JavaScript 引擎用尽了各种办法（比如 JIT，可以延迟编译甚至实施重编译）来保证性能最佳。

理解作用域

职能划分：

• 引擎

  • 从头到尾负责整个 JavaScript 程序的编译及执行过程

• 编译器

  • 负责语法分析及代码生成等脏活累活

• 作用域

  • 负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则
  • 确定当前执行的代码对这些标识符的访问权限

var a = 2;

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

:::tip
LHS 和 RHS 的含义是“赋值操作的左侧或右侧”并不一定意味着就是“= 赋值操作符的左侧或右侧”。赋值操作还有其他几种形式，因此在概念上最好将其理解为“赋值操作的目标是谁（LHS）”以及“谁是赋值操作的源头（RHS）”。
RHS 查询与简单地查找某个变量的值别无二致，而 LHS 查询则是试图找到变量的容器本身，从而可以对其赋值。
:::

作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。

function foo(a) {
  console.log(a + b);
}
var b = 2;
foo(1); // 3

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

异常

如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。

当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中 就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非“严格模式”下。

在严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询失败时类似的 ReferenceError 异常。

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

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

词法作用域

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

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

词法阶段

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

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

function foo(a) {
  var b = a * 2;
  function bar(c) {
    console.log(a, b, c);
  }
  bar(b * 3);
}
foo(2); // 2, 4, 12

气泡 1 包含整个全局作用域，其中只有一个标识符 foo。气泡 2 包含着 foo 所创建的作用域，其中有三个标识符 a, b 和 bar。气泡 3 包含着 bar 所创建的作用域，其中有一个标识符 c。作用域气泡由其对应的作用域块代码写在哪里决定，它们是逐级包含的。

注意，这里所说的气泡是严格包含的。没有任何函数的气泡可以（部分地）同时出现在两个外部作用域的气泡中，就如同没有任何函数可以部分地同时出现在两个父级函数中一样。

作用域气泡的结构和互相之间的位置关系给引擎提供了足够的位置信息，引擎用这些信息来查找标识符的位置。

作用域查找会在找到第一个匹配的标识符时停止。 在多层的嵌套作用域中可以定义同名的标识符，这叫作 “遮蔽效应”（内部的标识符“遮蔽”了外部的标识符）。抛开遮蔽效应，作用域查找始终从运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇见第一个匹配的标识符为止。

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

window.a

通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量如果被遮蔽了，无论如何都无法被访问到。
:::

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

::: warning
词法作用域查找只会 查找一级标识符，比如a 、b 和 c 。如果代码中引用了 foo.bar.baz ，词法作用域查找只会试图查找 foo 标识符，找到这个变量后，对象属性访问规则会分别接管对 bar 和 baz 属性的访问。
:::

欺骗词法

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

eval

eval() 函数可以接受一个字符串为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。换句话说，可以在你写的代码中用程序生成代码并运行，就好像代码是写在那个位置的一样。

在执行 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;' 会被当做本来就在那里一样来处理

默认情况下，如果 eval() 中所执行的代码包含有一个或多个声明（无论是变量还是函数），就会对 eval() 所处的词法作用域进行修改。技术上，通过一些技巧可以间接调用 eval() 来使其运行在全局作用域中，并对全局作用域进行修改。但无论何种情况，eval() 都可以在运行期修改书写期的词法作用域。

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

with

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

var obj = {
  a: 1,
  b: 2,
  c: 3
};

// 重复 obj 引用
obj.a = 2;
obj.b = 3;
obj.c = 4;

// with 快捷使用
with (obj) {
  a = 3;
  b = 4;
  c = 5;
}

with 可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域，因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。

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

性能影响

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

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

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

如果代码中大量使用 eval() 或 with ，那么运行起来一定会变得非常慢。无论引擎多聪明，试图将这些悲观情况的副作用限制在最小范围内，也无法避免如果没有这些优化，代码会运行得更慢这个事实 。

函数作用域和块作用域

函数中的作用域

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

// foo() 作用域气泡中包含了标识符 a 、 b 、 c 和 bar
function foo (a) {
  var b = 2;

  function bar () {}

  var c = 3;
}

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。这种设计方案是非常有用的，能充分利用 JavaScript 变量可以根据需要改变值类型的“动态”特性。

如果不细心处理那些可以在整个作用域范围内被访问的变量，可能会带来意想不到的问题。

隐藏内部实现

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

实际的结果就是在这个代码片段的周围创建了一个作用域气泡，也就是说这段代码中的任何声明（变量或函数）都将绑定在这个新创建的包装函数的作用域中，而不是先前所在的作用域中。换句话说，可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。

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

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

这个原则可以延伸到如何选择作用域来包含变量和函数。如果所有变量和函数都在全局作用域中，当然可以在所有的内部嵌套作用域中访问到它们。但这样会破坏前面提到的最小特权原则，因为可能会暴漏过多的变量或函数，而这些变量或函数本应该是私有的，正确的代码应该是可以阻止对这些变量或函数进行访问的。

规避冲突

“隐藏”作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个标识符可能具有相同的名字但用途却不一样，无意间可能造成命名冲突。冲突会导致变量的值被意外覆盖。

1. 全局命名空间

变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时，如果它们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。

这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间 ，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴漏在顶级的词法作用域中。

1. 模块管理

另外一种避免冲突的办法和现代的模块 机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标识符加入到全局作用域中，而是通过依赖管理器的机制将库的标识符显式地导入到另外一个特定的作用域中。

函数作用域

匿名和具名

匿名函数表达式，函数表达式可以是匿名的，而函数声明则不可以省略函数名。

setTimeout(function () {
  console.log('hello');
}, 1000);

匿名函数表达式的缺点：

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

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

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

setTimeout(function timeoutHandler() {
  console.log('hello');
}, 1000);

立即执行函数表达式

IIFE，代表立即执行函数表达式（Immediately Invoked FunctionExpression）。

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

console.log(a); // 2

由于函数被包含在一对 () 括号内部，因此成为了一个表达式，通过在末尾加上另外一个 () 可以立即执行这个函数，比如 (function foo(){ .. })() 。第一个( ) 将函数变成表达式，第二个( ) 执行了这个函数。

IIFE 的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。

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

console.log(a); // 2

IIFE 还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在 IIFE 执行之后 当作参数传递进去。这种模式在 UMD（Universal Module Definition）项目中被广泛使用。

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

块作用域

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

with

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

try / catch

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

try {
  undefined(); // 抛出异常
} catch (error) {
  console.log(error);
}
console.log(error); // ReferenceError: error is not found

let

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

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

为块作用域显式地创建块，使变量的附属关系变得更加清晰。通常来讲，显式的代码优于隐式或一些精巧但不清晰的代码。

只要声明是有效的，在声明中的任意位置都可以使用 { .. } 括号来为 let 创建一个用于绑定的块。

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

{
  console.log(bar); // ReferenceError
  let bar = 2;
}

垃圾收集

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

let 循环

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

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

const

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

提升

声明在前还是赋值在前

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

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

编译阶段的工作

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

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

var a = 2;, JavaScript 会将其看成两个声明：var a; 和 a = 2;。第一个声明是在编译阶段进行的，第二个声明会被留在原地等待执行阶段。

// a = 2;
// var a;
// console.log(a);
// 实际执行
var a;
a = 2;
console.log(a);

// console.log(a);
// var a = 2;
// 实际执行
var a;
console.log(a);
a = 2;

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

::: warning
只有声明本身会被提升，而赋值或其他运行逻辑会留在原地 。如果提升改变了代码执行的顺序，会造成非常严重的破坏。
:::

每个作用域 都会进行提升操作。

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

foo(); // TypeError 相当于 undefined()
var foo = function() {
  console.log('foo');
};

即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
  console.log('foo');
};

// 实际执行顺序
// var foo;
// foo(); // TypeError
// bar(); // ReferenceError
// foo = function () {
//   var bar = ...self...
//   console.log('foo');
// };

函数优先

函数声明和变量声明都会被提升。但是一个值得注意的细节是函数会首先被提升，然后才是变量。

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

// 实际执行顺序
// function foo() {
//   console.log(1);
// }
// foo(); // 1
// foo = function() {
//   console.log(2);
// };

一个普通块内部的函数声明通常会被提升到所在作用域的顶部。

foo(); // b
var a = true;
if (a) {
  function foo() {
    console.log('a');
  }
} else {
  function foo() {
    console.log('b');
  }
}

作用域闭包

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

闭包的实质

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

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

bar() 拥有涵盖 foo() 内部作用域的闭包，使得该作用域能够一直存活，以供 bar() 在之后任何时间进行引用。bar() 依然持有对该作用域的引用，而这个引用就叫作闭包。

bar() 函数在定义时的词法作用域以外的地方被调用。闭包使得函数可以继续访问定义时的词法作用域。

无论使用何种方式对函数类型的值进行传递 ，当函数在别处被调用时都可以观察到闭包。

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

function wait (message) {
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}

wait('Hello, closure!');

上例将一个内部函数（timer）传递给 setTimeout()。timer 具有涵盖 wait() 作用域的闭包，因此还保有对变量 message 的引用。wait() 执行 1000 ms 后， 它的内部作用域并不会消失， timer 函数依然抱有 wait() 作用域的闭包。

深入到引擎的内部原理中，内置的工具函数 setTimeout(..) 持有对一个参数的引用，这个参数也许叫作 fn 或者 func ，或者其他类似的名字。引擎会调用这个函数，在例子中就是内部的 timer 函数，而词法作用域在这个过程中保持完整。

这就是闭包

本质上无论何时何地 ，如果将函数（访问它们各自的词法作用域）当作第一级的值类型并到处传递，你就会看到闭包在这些函数中的应用。在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers 或者任何其他的异步（或者同步）任务中，只要使用了回调函数 ，实际上就是在使用闭包！

循环和闭包

for (var i = 0; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i);
  }, i * 100);
}
// expected output: 6 6 6 6 6
// 输出显示的是循环结束时 i 的最终值

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

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 100);
  })(i);
}
// expected output: 0 1 2 3 4

在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。

我们使用 IIFE 在每次迭代时都创建一个新的作用域。换句话说，每次迭代我们都需要一个块作用域 。

本质上这是将一个块转换成一个可以被关闭的作用域。

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

for 循环头部的 let 声明还会有一个特殊的行为。这个行为指出变量在循环过程中不止被声明一次，每次迭代 都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

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

模块

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];

  function doSomething() {
    console.log(something);
  }

  function doAnother() {
    console.log(another.join("!"));
  }

  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}

var foo = CoolModule();
foo.doSomething(); // "cool"
foo.doAnother(); // "1!2!3"

以上模式在 JavaScript 中被称为 模块。最常见的实现模块的方法通常被称为 模块暴露。

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

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

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

当只需要一个实例时，可以改进实现单例模式。

var foo = (function CoolModule () {
  var something = "cool";
  var another = [1, 2, 3];

  function doSomething() {
    console.log(something);
  }

  function doAnother() {
    console.log(another.join("!"));
  }

  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();

foo.doSomething(); // "cool"
foo.doAnother(); // "1!2!3"

通过在模块实例的内部保留对公共API对象的内部引用，可以从内部 对模块实例进行修改，包括添加或删除方法和属性，以及修改它们的值。

var foo = (function CoolModule (id) {
  function change () {
    publicAPI.identify = identify2;
  }
  function identify1() {
    console.log(id);
  }
  function identify2() {
    console.log(id.toUpperCase());
  }
  var publicAPI = {
    change: change,
    identify: identify1
  };
  return publicAPI;
})('foo module');

foo.identify(); // "foo module"
foo.change();
foo.identify(); // "FOO MODULE"

现代的模块机制

大多数模块依赖加载器/管理器本质上都是将这种模块定义封装进一个友好的API。

未来的模块机制

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

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