严格模式的一些主要优点包括：
使调试更加容易。那些被忽略或默默失败了的代码错误，会产生错误或抛出异常，因此尽早提醒你代码中的问题，你才能更快地指引到它们的源代码。
防止意外的全局变量。如果没有严格模式，将值分配给一个未声明的变量会自动创建该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下，这样做的话会抛出错误。
消除 this 强制。如果没有严格模式，引用null或未定义的值到 this 值会自动强制到全局变量。这可能会导致许多令人头痛的问题和让人恨不得拔自己头发的bug。在严格模式下，引用 null或未定义的 this 值会抛出错误。
不允许重复的属性名称或参数值。当检测到对象（例如，var object = {foo: “bar”, foo: “baz”};）中重复命名的属性，或检测到函数中（例如，function foo(val1, val2, val1){}）重复命名的参数时，严格模式会抛出错误，因此捕捉几乎可以肯定是代码中的bug可以避免浪费大量的跟踪时间。
使eval() 更安全。在严格模式和非严格模式下，eval() 的行为方式有所不同。最显而易见的是，在严格模式下，变量和声明在 eval() 语句内部的函数不会在包含范围内创建（它们会在非严格模式下的包含范围中被创建，这也是一个常见的问题源）。
在 delete使用无效时抛出错误。delete操作符（用于从对象中删除属性）不能用在对象不可配置的属性上。当试图删除一个不可配置的属性时，非严格代码将默默地失败，而严格模式将在这样的情况下抛出异常。
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
// CommonJS模块
let { stat, exists, readFile } = require(‘fs’);
// 等同于
let _fs = require(‘fs’);
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
// ES6模块
import { stat, exists, readFile } from ‘fs’;
上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处，ES6 模块还有以下好处。
不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。
本章介绍 ES6 模块的语法，下一章介绍如何在浏览器和 Node 之中，加载 ES6 模块。
严格模式
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
上面这些限制，模块都必须遵守。由于严格模式是 ES5 引入的，不属于 ES6，所以请参阅相关 ES5 书籍，本书不再详细介绍了。
其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
export 命令
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。
// profile.js
export var firstName = ‘Michael’;
export var lastName = ‘Jackson’;
export var year = 1958;
上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。
export的写法，除了像上面这样，还有另外一种。
// profile.js
var firstName = ‘Michael’;
var lastName = ‘Jackson’;
var year = 1958;
export {firstName, lastName, year};
上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在var语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。
export命令除了输出变量，还可以输出函数或类（class）。
export function multiply(x, y) {
return x * y;
};
上面代码对外输出一个函数multiply。
通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { … }
function v2() { … }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。
需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。
同样的，function和class的输出，也必须遵守这样的写法。
// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};
另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export var foo = ‘bar’;
setTimeout(() => foo = ‘baz’, 500);
上面代码输出变量foo，值为bar，500 毫秒之后变成baz。
这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新，详见下文《Module 的加载实现》一节。
最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。
function foo() {
export default ‘bar’ // SyntaxError
}
foo()
上面代码中，export语句放在函数之中，结果报错。
import 命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
// main.js
import {firstName, lastName, year} from ‘./profile.js’;
function setName(element) {
element.textContent = firstName + ’ ’ + lastName;
}
上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from ‘./profile.js’;
import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import {a} from ‘./xxx.js’
a = {}; // Syntax Error : ‘a’ is read-only;
上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。
import {a} from ‘./xxx.js’
a.foo = ‘hello’; // 合法操作
上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
import {myMethod} from ‘util’;
上面代码中，util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from ‘my_module’;
上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
// 报错
import { ‘f’ + ‘oo’ } from ‘my_module’;
// 报错
let module = ‘my_module’;
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from ‘module1’;
} else {
import { foo } from ‘module2’;
}
上面三种写法都会报错，因为它们用到了表达式、变量和if结构。在静态分析阶段，这些语法都是没法得到值的。
最后，import语句会执行所加载的模块，因此可以有下面的写法。
import ‘lodash’;
上面代码仅仅执行lodash模块，但是不输入任何值。
如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。
import ‘lodash’;
import ‘lodash’;
上面代码加载了两次lodash，但是只会执行一次。
import { foo } from ‘my_module’;
import { bar } from ‘my_module’;
// 等同于
import { foo, bar } from ‘my_module’;
上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。
目前阶段，通过 Babel 转码，CommonJS 模块的require命令和 ES6 模块的import命令，可以写在同一个模块里面，但是最好不要这样做。因为import在静态解析阶段执行，所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。
require(‘core-js/modules/es6.symbol’);
require(‘core-js/modules/es6.promise’);
import React from ‘React’;
模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
下面是一个circle.js文件，它输出两个方法area和circumference。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
现在，加载这个模块。
// main.js
import { area, circumference } from ‘./circle’;
console.log(‘圆面积：’ + area(4));
console.log(‘圆周长：’ + circumference(14));
上面写法是逐一指定要加载的方法，整体加载的写法如下。
import * as circle from ‘./circle’;
console.log(‘圆面积：’ + circle.area(4));
console.log(‘圆周长：’ + circle.circumference(14));
注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。
import * as circle from ‘./circle’;
// 下面两行都是不允许的
circle.foo = ‘hello’;
circle.area = function () {};
export default 命令
从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log(‘foo’);
}
上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from ‘./export-default’;
customName(); // ‘foo’
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
export default命令用在非匿名函数前，也是可以的。
// export-default.js
export default function foo() {
console.log(‘foo’);
}
// 或者写成
function foo() {
console.log(‘foo’);
}
export default foo;
上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
下面比较一下默认输出和正常输出。
// 第一组
export default function crc32() { // 输出
// …
}
import crc32 from ‘crc32’; // 输入
// 第二组
export function crc32() { // 输出
// …
};
import {crc32} from ‘crc32’; // 输入
上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add;
// app.js
import { default as foo } from ‘modules’;
// 等同于
// import foo from ‘modules’;
正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。
同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。
// 正确
export default 42;
// 报错
export 42;
上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定对外接口为default。
有了export default命令，输入模块时就非常直观了，以输入 lodash 模块为例。
import _ from ‘lodash’;
如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样。
import _, { each, forEach } from ‘lodash’;
对应上面代码的export语句如下。
export default function (obj) {
// ···
}
export function each(obj, iterator, context) {
// ···
}
export { each as forEach };
上面代码的最后一行的意思是，暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法。
export default也可以用来输出类。
// MyClass.js
export default class { … }
// main.js
import MyClass from ‘MyClass’;
let o = new MyClass();
export 与 import 的复合写法
如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
export { foo, bar } from ‘my_module’;
// 可以简单理解为
import { foo, bar } from ‘my_module’;
export { foo, bar };
上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
模块的接口改名和整体输出，也可以采用这种写法。
// 接口改名
export { foo as myFoo } from ‘my_module’;
// 整体输出
export * from ‘my_module’;
默认接口的写法如下。
export { default } from ‘foo’;
具名接口改为默认接口的写法如下。
export { es6 as default } from ‘./someModule’;
// 等同于
import { es6 } from ‘./someModule’;
export default es6;
同样地，默认接口也可以改名为具名接口。
export { default as es6 } from ‘./someModule’;
下面三种import语句，没有对应的复合写法。
import * as someIdentifier from “someModule”;
import someIdentifier from “someModule”;
import someIdentifier, { namedIdentifier } from “someModule”;
为了做到形式的对称，现在有提案，提出补上这三种复合写法。
export * as someIdentifier from “someModule”;
export someIdentifier from “someModule”;
export someIdentifier, { namedIdentifier } from “someModule”;
模块的继承
模块之间也可以继承。
假设有一个circleplus模块，继承了circle模块。
// circleplus.js
export * from ‘circle’;
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
上面代码中的export *，表示再输出circle模块的所有属性和方法。注意，export *命令会忽略circle模块的default方法。然后，上面代码又输出了自定义的e变量和默认方法。
这时，也可以将circle的属性或方法，改名后再输出。
// circleplus.js
export { area as circleArea } from ‘circle’;
上面代码表示，只输出circle模块的area方法，且将其改名为circleArea。
加载上面模块的写法如下。
// main.js
import * as math from ‘circleplus’;
import exp from ‘circleplus’;
console.log(exp(math.e));
上面代码中的import exp表示，将circleplus模块的默认方法加载为exp方法。
跨模块常量
本书介绍const命令的时候说过，const声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。
// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;
// test1.js 模块
import * as constants from ‘./constants’;
console.log(constants.A); // 1
console.log(constants.B); // 3
// test2.js 模块
import {A, B} from ‘./constants’;
console.log(A); // 1
console.log(B); // 3
如果要使用的常量非常多，可以建一个专门的constants目录，将各种常量写在不同的文件里面，保存在该目录下。
// constants/db.js
export const db = {
url: ‘http://my.couchdbserver.local:5984’,
admin_username: ‘admin’,
admin_password: ‘admin password’
};
// constants/user.js
export const users = [‘root’, ‘admin’, ‘staff’, ‘ceo’, ‘chief’, ‘moderator’];
然后，将这些文件输出的常量，合并在index.js里面。
// constants/index.js
export {db} from ‘./db’;
export {users} from ‘./users’;
使用的时候，直接加载index.js就可以了。
// script.js
import {db, users} from ‘./constants/index’;
import()
简介
前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。所以，下面的代码会报错。
// 报错
if (x === 2) {
import MyModual from ‘./myModual’;
}
上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。
这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。
const path = ‘./’ + fileName;
const myModual = require(path);
上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import命令做不到这一点。
因此，有一个提案，建议引入import()函数，完成动态加载。
import(specifier)
上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector(‘main’);
import(./section-modules/${someVariable}.js)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
适用场合
下面是import()的一些适用场合。
（1）按需加载。
import()可以在需要的时候，再加载某个模块。
button.addEventListener(‘click’, event => {
import(’./dialogBox.js’)
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。
（2）条件加载
import()可以放在if代码块，根据不同的情况，加载不同的模块。
if (condition) {
import(‘moduleA’).then(…);
} else {
import(‘moduleB’).then(…);
}
上面代码中，如果满足条件，就加载模块 A，否则加载模块 B。
（3）动态的模块路径
import()允许模块路径动态生成。
import(f())
.then(…);
上面代码中，根据函数f的返回结果，加载不同的模块。
注意点
import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import(’./myModule.js’)
.then(({export1, export2}) => {
// …·
});
上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。
如果模块有default输出接口，可以用参数直接获得。
import(’./myModule.js’)
.then(myModule => {
console.log(myModule.default);
});
上面的代码也可以使用具名输入的形式。
import(’./myModule.js’)
.then(({default: theDefault}) => {
console.log(theDefault);
});
如果想同时加载多个模块，可以采用下面的写法。
Promise.all([
import(’./module1.js’),
import(’./module2.js’),
import(’./module3.js’),
])
.then(([module1, module2, module3]) => {
···
});
import()也可以用在 async 函数之中。
async function main() {
const myModule = await import(’./myModule.js’);
const {export1, export2} = await import(’./myModule.js’);
const [module1, module2, module3] =
await Promise.all([
import(’./module1.js’),
import(’./module2.js’),
import(’./module3.js’),
]);
}
main();
浏览器加载
传统方法
HTML 网页中，浏览器通过
上面代码中，由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。
默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。
上面代码中，
defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
加载规则
浏览器加载 ES6 模块，也使用
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。
浏览器对于带有type="module"的
如果网页有多个
一旦使用了async属性，
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。
对于外部的模块脚本（上例是foo.js），有几点需要注意。
代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
模块脚本自动采用严格模式，不管有没有声明use strict。
模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口。
模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。
同一个模块如果加载多次，将只执行一次。
下面是一个示例模块。
import utils from ‘https://example.com/js/utils.js’;
const x = 1;
console.log(x === window.x); //false
console.log(this === undefined); // true
利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中。
const isNotModuleScript = this !== undefined;
ES6 模块与 CommonJS 模块的差异
讨论 Node 加载 ES6 模块之前，必须了解 ES6 模块与 CommonJS 模块完全不同。
它们有两个重大差异。
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
下面重点解释第一个差异。
CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。请看下面这个模块文件lib.js的例子。
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块。
// main.js
var mod = require(’./lib’);
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3
上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
};
上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。
$ node main.js
3
4
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from ‘./lib’;
console.log(counter); // 3
incCounter();
console.log(counter); // 4
上面代码说明，ES6 模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。
再举一个出现在export一节中的例子。
// m1.js
export var foo = ‘bar’;
setTimeout(() => foo = ‘baz’, 500);
// m2.js
import {foo} from ‘./m1.js’;
console.log(foo);
setTimeout(() => console.log(foo), 500);
上面代码中，m1.js的变量foo，在刚加载时等于bar，过了 500 毫秒，又变为等于baz。
让我们看看，m2.js能否正确读取这个变化。
$ babel-node m2.js
bar
baz
上面代码表明，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。
由于 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。
// lib.js
export let obj = {};
// main.js
import { obj } from ‘./lib’;
obj.prop = 123; // OK
obj = {}; // TypeError
上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。
// mod.js
function C() {
this.sum = 0;
this.add = function () {
this.sum += 1;
};
this.show = function () {
console.log(this.sum);
};
}
export let c = new C();
上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。
// x.js
import {c} from ‘./mod’;
c.add();
// y.js
import {c} from ‘./mod’;
c.show();
// main.js
import ‘./x’;
import ‘./y’;
现在执行main.js，输出的是1。
$ babel-node main.js
1
这就证明了x.js和y.js加载的都是C的同一个实例。
Node 加载
概述
Node 对 ES6 模块的处理比较麻烦，因为它有自己的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。
Node 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。require命令不能加载.mjs文件，会报错，只有import命令才可以加载.mjs文件。反过来，.mjs文件里面也不能使用require命令，必须使用import。
目前，这项功能还在试验阶段。安装 Node v8.5.0 或以上版本，要用–experimental-modules参数才能打开该功能。
$ node --experimental-modules my-app.mjs
为了与浏览器的import加载规则相同，Node 的.mjs文件支持 URL 路径。
import ‘./foo?query=1’; // 加载 ./foo 传入参数 ?query=1
上面代码中，脚本路径带有参数?query=1，Node 会按 URL 规则解读。同一个脚本只要参数不同，就会被加载多次，并且保存成不同的缓存。由于这个原因，只要文件名中含有:、%、#、?等特殊字符，最好对这些字符进行转义。
目前，Node 的import命令只支持加载本地模块（file:协议），不支持加载远程模块。
如果模块名不含路径，那么import命令会去node_modules目录寻找这个模块。
import ‘baz’;
import ‘abc/123’;
如果模块名包含路径，那么import命令会按照路径去寻找这个名字的脚本文件。
import ‘file:///etc/config/app.json’;
import ‘./foo’;
import ‘./foo?search’;
import ‘…/bar’;
import ‘/baz’;
如果脚本文件省略了后缀名，比如import ‘./foo’，Node 会依次尝试四个后缀名：./foo.mjs、./foo.js、./foo.json、./foo.node。如果这些脚本文件都不存在，Node 就会去加载./foo/package.json的main字段指定的脚本。如果./foo/package.json不存在或者没有main字段，那么就会依次加载./foo/index.mjs、./foo/index.js、./foo/index.json、./foo/index.node。如果以上四个文件还是都不存在，就会抛出错误。
最后，Node 的import命令是异步加载，这一点与浏览器的处理方法相同。
内部变量
ES6 模块应该是通用的，同一个模块不用修改，就可以用在浏览器环境和服务器环境。为了达到这个目标，Node 规定 ES6 模块之中不能使用 CommonJS 模块的特有的一些内部变量。
首先，就是this关键字。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。
其次，以下这些顶层变量在 ES6 模块之中都是不存在的。
arguments
require
module
exports
__filename
__dirname
如果你一定要使用这些变量，有一个变通方法，就是写一个 CommonJS 模块输出这些变量，然后再用 ES6 模块加载这个 CommonJS 模块。但是这样一来，该 ES6 模块就不能直接用于浏览器环境了，所以不推荐这样做。
// expose.js
module.exports = {__dirname};
// use.mjs
import expose from ‘./expose.js’;
const {__dirname} = expose;
上面代码中，expose.js是一个 CommonJS 模块，输出变量__dirname，该变量在 ES6 模块之中不存在。ES6 模块加载expose.js，就可以得到__dirname。
ES6 模块加载 CommonJS 模块
CommonJS 模块的输出都定义在module.exports这个属性上面。Node 的import命令加载 CommonJS 模块，Node 会自动将module.exports属性，当作模块的默认输出，即等同于export default xxx。
下面是一个 CommonJS 模块。
// a.js
module.exports = {
foo: ‘hello’,
bar: ‘world’
};
// 等同于
export default {
foo: ‘hello’,
bar: ‘world’
};
import命令加载上面的模块，module.exports会被视为默认输出，即import命令实际上输入的是这样一个对象{ default: module.exports }。
所以，一共有三种写法，可以拿到 CommonJS 模块的module.exports。
// 写法一
import baz from ‘./a’;
// baz = {foo: ‘hello’, bar: ‘world’};
// 写法二
import {default as baz} from ‘./a’;
// baz = {foo: ‘hello’, bar: ‘world’};
// 写法三
import * as baz from ‘./a’;
// baz = {
// get default() {return module.exports;},
// get foo() {return this.default.foo}.bind(baz),
// get bar() {return this.default.bar}.bind(baz)
// }
上面代码的第三种写法，可以通过baz.default拿到module.exports。foo属性和bar属性就是可以通过这种方法拿到了module.exports。
下面是一些例子。
// b.js
module.exports = null;
// es.js
import foo from ‘./b’;
// foo = null;
import * as bar from ‘./b’;
// bar = { default:null };
上面代码中，es.js采用第二种写法时，要通过bar.default这样的写法，才能拿到module.exports。
// c.js
module.exports = function two() {
return 2;
};
// es.js
import foo from ‘./c’;
foo(); // 2
import * as bar from ‘./c’;
bar.default(); // 2
bar(); // throws, bar is not a function
上面代码中，bar本身是一个对象，不能当作函数调用，只能通过bar.default调用。
CommonJS 模块的输出缓存机制，在 ES6 加载方式下依然有效。
// foo.js
module.exports = 123;
setTimeout(_ => module.exports = null);
上面代码中，对于加载foo.js的脚本，module.exports将一直是123，而不会变成null。
由于 ES6 模块是编译时确定输出接口，CommonJS 模块是运行时确定输出接口，所以采用import命令加载 CommonJS 模块时，不允许采用下面的写法。
// 不正确
import { readFile } from ‘fs’;
上面的写法不正确，因为fs是 CommonJS 格式，只有在运行时才能确定readFile接口，而import命令要求编译时就确定这个接口。解决方法就是改为整体输入。
// 正确的写法一
import * as express from ‘express’;
const app = express.default();
// 正确的写法二
import express from ‘express’;
const app = express();
CommonJS 模块加载 ES6 模块
CommonJS 模块加载 ES6 模块，不能使用require命令，而要使用import()函数。ES6 模块的所有输出接口，会成为输入对象的属性。
// es.mjs
let foo = { bar: ‘my-default’ };
export default foo;
// cjs.js
const es_namespace = await import(’./es.mjs’);
// es_namespace = {
// get default() {
// …
// }
// }
console.log(es_namespace.default);
// { bar:‘my-default’ }
上面代码中，default接口变成了es_namespace.default属性。
下面是另一个例子。
// es.js
export let foo = { bar:‘my-default’ };
export { foo as bar };
export function f() {};
export class c {};
// cjs.js
const es_namespace = await import(’./es’);
// es_namespace = {
// get foo() {return foo;}
// get bar() {return foo;}
// get f() {return f;}
// get c() {return c;}
// }
循环加载
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
// a.js
var b = require(‘b’);
// b.js
var a = require(‘a’);
通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。
但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑“循环加载”的情况。
对于 JavaScript 语言来说，目前最常见的两种模块格式 CommonJS 和 ES6，处理“循环加载”的方法是不一样的，返回的结果也不一样。
CommonJS 模块的加载原理
介绍 ES6 如何处理“循环加载”之前，先介绍目前最流行的 CommonJS 模块格式的加载原理。
CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。
{
id: ‘…’,
exports: { … },
loaded: true,
…
}
上面代码就是 Node 内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。
以后需要用到这个模块的时候，就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
CommonJS 模块的循环加载
CommonJS 模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
让我们来看，Node 官方文档里面的例子。脚本文件a.js代码如下。
exports.done = false;
var b = require(’./b.js’);
console.log(‘在 a.js 之中，b.done = %j’, b.done);
exports.done = true;
console.log(‘a.js 执行完毕’);
上面代码之中，a.js脚本先输出一个done变量，然后加载另一个脚本文件b.js。注意，此时a.js代码就停在这里，等待b.js执行完毕，再往下执行。
再看b.js的代码。
exports.done = false;
var a = require(’./a.js’);
console.log(‘在 b.js 之中，a.done = %j’, a.done);
exports.done = true;
console.log(‘b.js 执行完毕’);
上面代码之中，b.js执行到第二行，就会去加载a.js，这时，就发生了“循环加载”。系统会去a.js模块对应对象的exports属性取值，可是因为a.js还没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。
a.js已经执行的部分，只有一行。
exports.done = false;
因此，对于b.js来说，它从a.js只输入一个变量done，值为false。
然后，b.js接着往下执行，等到全部执行完毕，再把执行权交还给a.js。于是，a.js接着往下执行，直到执行完毕。我们写一个脚本main.js，验证这个过程。
var a = require(’./a.js’);
var b = require(’./b.js’);
console.log(‘在 main.js 之中, a.done=%j, b.done=%j’, a.done, b.done);
执行main.js，运行结果如下。
$ node main.js
在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true
上面的代码证明了两件事。一是，在b.js之中，a.js没有执行完毕，只执行了第一行。二是，main.js执行到第二行时，不会再次执行b.js，而是输出缓存的b.js的执行结果，即它的第四行。
exports.done = true;
总之，CommonJS 输入的是被输出值的拷贝，不是引用。
另外，由于 CommonJS 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候，必须非常小心。
var a = require(‘a’); // 安全的写法
var foo = require(‘a’).foo; // 危险的写法
exports.good = function (arg) {
return a.foo(‘good’, arg); // 使用的是 a.foo 的最新值
};
exports.bad = function (arg) {
return foo(‘bad’, arg); // 使用的是一个部分加载时的值
};
上面代码中，如果发生循环加载，require(‘a’).foo的值很可能后面会被改写，改用require(‘a’)会更保险一点。
ES6 模块的循环加载
ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from ‘foo’），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
请看下面这个例子。
// a.mjs
import {bar} from ‘./b’;
console.log(‘a.mjs’);
console.log(bar);
export let foo = ‘foo’;
// b.mjs
import {foo} from ‘./a’;
console.log(‘b.mjs’);
console.log(foo);
export let bar = ‘bar’;
上面代码中，a.mjs加载b.mjs，b.mjs又加载a.mjs，构成循环加载。执行a.mjs，结果如下。
$ node --experimental-modules a.mjs
b.mjs
ReferenceError: foo is not defined
上面代码中，执行a.mjs以后会报错，foo变量未定义，这是为什么？
让我们一行行来看，ES6 循环加载是怎么处理的。首先，执行a.mjs以后，引擎发现它加载了b.mjs，因此会优先执行b.mjs，然后再执行a.mjs。接着，执行b.mjs的时候，已知它从a.mjs输入了foo接口，这时不会去执行a.mjs，而是认为这个接口已经存在了，继续往下执行。执行到第三行console.log(foo)的时候，才发现这个接口根本没定义，因此报错。
解决这个问题的方法，就是让b.mjs运行的时候，foo已经有定义了。这可以通过将foo写成函数来解决。
// a.mjs
import {bar} from ‘./b’;
console.log(‘a.mjs’);
console.log(bar());
function foo() { return ‘foo’ }
export {foo};
// b.mjs
import {foo} from ‘./a’;
console.log(‘b.mjs’);
console.log(foo());
function bar() { return ‘bar’ }
export {bar};
这时再执行a.mjs就可以得到预期结果。
$ node --experimental-modules a.mjs
b.mjs
foo
a.mjs
bar
这是因为函数具有提升作用，在执行import {bar} from './b’时，函数foo就已经有定义了，所以b.mjs加载的时候不会报错。这也意味着，如果把函数foo改写成函数表达式，也会报错。
// a.mjs
import {bar} from ‘./b’;
console.log(‘a.mjs’);
console.log(bar());
const foo = () => ‘foo’;
export {foo};
上面代码的第四行，改成了函数表达式，就不具有提升作用，执行就会报错。
我们再来看 ES6 模块加载器SystemJS给出的一个例子。
// even.js
import { odd } from ‘./odd’
export var counter = 0;
export function even(n) {
counter++;
return n === 0 || odd(n - 1);
}
// odd.js
import { even } from ‘./even’;
export function odd(n) {
return n !== 0 && even(n - 1);
}
上面代码中，even.js里面的函数even有一个参数n，只要不等于 0，就会减去 1，传入加载的odd()。odd.js也会做类似操作。
运行上面这段代码，结果如下。
$ babel-node
import * as m from ‘./even.js’;
m.even(10);
true
m.counter
6
m.even(20)
true
m.counter
17
上面代码中，参数n从 10 变为 0 的过程中，even()一共会执行 6 次，所以变量counter等于 6。第二次调用even()时，参数n从 20 变为 0，even()一共会执行 11 次，加上前面的 6 次，所以变量counter等于 17。
这个例子要是改写成 CommonJS，就根本无法执行，会报错。
// even.js
var odd = require(’./odd’);
var counter = 0;
exports.counter = counter;
exports.even = function (n) {
counter++;
return n == 0 || odd(n - 1);
}
// odd.js
var even = require(’./even’).even;
module.exports = function (n) {
return n != 0 && even(n - 1);
}
上面代码中，even.js加载odd.js，而odd.js又去加载even.js，形成“循环加载”。这时，执行引擎就会输出even.js已经执行的部分（不存在任何结果），所以在odd.js之中，变量even等于undefined，等到后面调用even(n - 1)就会报错。
$ node
var m = require(’./even’);
m.even(10)
TypeError: even is not a function
ES6 模块的转码
浏览器目前还不支持 ES6 模块，为了现在就能使用，可以将其转为 ES5 的写法。除了 Babel 可以用来转码之外，还有以下两个方法，也可以用来转码。
ES6 module transpiler
ES6 module transpiler是 square 公司开源的一个转码器，可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法，从而在浏览器中使用。
首先，安装这个转码器。
$ npm install -g es6-module-transpiler
然后，使用compile-modules convert命令，将 ES6 模块文件转码。
$ compile-modules convert file1.js file2.js
-o参数可以指定转码后的文件名。
$ compile-modules convert -o out.js file1.js
SystemJS
另一种解决方法是使用 SystemJS。它是一个垫片库（polyfill），可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器。
使用时，先在网页内载入system.js文件。
然后，使用System.import方法加载模块文件。
上面代码中的./app，指的是当前目录下的 app.js 文件。它可以是 ES6 模块文件，System.import会自动将其转码。
需要注意的是，System.import使用异步加载，返回一个 Promise 对象，可以针对这个对象编程。下面是一个模块文件。
// app/es6-file.js:
export class q {
constructor() {
this.es6 = ‘hello’;
}
}
然后，在网页内加载这个模块文件。
上面代码中，System.import方法返回的是一个 Promise 对象，所以可以用then方法指定回调函数。
类的修饰
许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为。目前，有一个提案将这项功能，引入了 ECMAScript。
@testable
class MyTestableClass {
// …
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
上面代码中，@testable就是一个修饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。testable函数的参数target是MyTestableClass类本身。
基本上，修饰器的行为就是下面这样。
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
也就是说，修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。
function testable(target) {
// …
}
上面代码中，testable函数的参数target，就是会被修饰的类。
如果觉得一个参数不够用，可以在修饰器外面再封装一层函数。
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
上面代码中，修饰器testable可以接受参数，这就等于可以修改修饰器的行为。
注意，修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数。
前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的prototype对象操作。
function testable(target) {
target.prototype.isTestable = true;
}
@testable
class MyTestableClass {}
let obj = new MyTestableClass();
obj.isTestable // true
上面代码中，修饰器函数testable是在目标类的prototype对象上添加属性，因此就可以在实例上调用。
下面是另外一个例子。
// mixins.js
export function mixins(…list) {
return function (target) {
Object.assign(target.prototype, …list)
}
}
// main.js
import { mixins } from ‘./mixins’
const Foo = {
foo() { console.log(‘foo’) }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // ‘foo’
上面代码通过修饰器mixins，把Foo对象的方法添加到了MyClass的实例上面。可以用Object.assign()模拟这个功能。
const Foo = {
foo() { console.log(‘foo’) }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo() // ‘foo’
实际开发中，React 与 Redux 库结合使用时，常常需要写成下面这样。
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
有了装饰器，就可以改写上面的代码。
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
相对来说，后一种写法看上去更容易理解。
方法的修饰
修饰器不仅可以修饰类，还可以修饰类的属性。
class Person {
@readonly
name() { return ${this.first} ${this.last} }
}
上面代码中，修饰器readonly用来修饰“类”的name方法。
修饰器函数readonly一共可以接受三个参数。
function readonly(target, name, descriptor){
// descriptor对象原来的值如下
// {
// value: specifiedFunction,
// enumerable: false,
// configurable: true,
// writable: true
// };
descriptor.writable = false;
return descriptor;
}
readonly(Person.prototype, ‘name’, descriptor);
// 类似于
Object.defineProperty(Person.prototype, ‘name’, descriptor);
修饰器第一个参数是类的原型对象，上例是Person.prototype，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，所以只能去修饰原型（这不同于类的修饰，那种情况时target参数指的是类本身）；第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。
另外，上面代码说明，修饰器（readonly）会修改属性的描述对象（descriptor），然后被修改的描述对象再用来定义属性。
下面是另一个例子，修改属性描述对象的enumerable属性，使得该属性不可遍历。
class Person {
@nonenumerable
get kidCount() { return this.children.length; }
}
function nonenumerable(target, name, descriptor) {
descriptor.enumerable = false;
return descriptor;
}
下面的@log修饰器，可以起到输出日志的作用。
class Math {
@log
add(a, b) {
return a + b;
}
}
function log(target, name, descriptor) {
var oldValue = descriptor.value;
descriptor.value = function() {
console.log(Calling ${name} with, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
const math = new Math();
// passed parameters should get logged now
math.add(2, 4);
上面代码中，@log修饰器的作用就是在执行原始的操作之前，执行一次console.log，从而达到输出日志的目的。
修饰器有注释的作用。
@testable
class Person {
@readonly
@nonenumerable
name() { return ${this.first} ${this.last} }
}
从上面代码中，我们一眼就能看出，Person类是可测试的，而name方法是只读和不可枚举的。
下面是使用 Decorator 写法的组件，看上去一目了然。
@Component({
tag: ‘my-component’,
styleUrl: ‘my-component.scss’
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@State() isVisible: boolean = true;
render() {
return (
Hello, my name is {this.first} {this.last}
);
}
}
如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。
function dec(id){
console.log(‘evaluated’, id);
return (target, property, descriptor) => console.log(‘executed’, id);
}
class Example {
@dec(1)
@dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1
上面代码中，外层修饰器@dec(1)先进入，但是内层修饰器@dec(2)先执行。
除了注释，修饰器还能用来类型检查。所以，对于类来说，这项功能相当有用。从长期来看，它将是 JavaScript 代码静态分析的重要工具。
为什么修饰器不能用于函数？
修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
上面的代码，意图是执行后counter等于 1，但是实际上结果是counter等于 0。因为函数提升，使得实际执行的代码是下面这样。
@add
function foo() {
}
var counter;
var add;
counter = 0;
add = function () {
counter++;
};
下面是另一个例子。
var readOnly = require(“some-decorator”);
@readOnly
function foo() {
}
上面代码也有问题，因为实际执行是下面这样。
var readOnly;
@readOnly
function foo() {
}
readOnly = require(“some-decorator”);
总之，由于存在函数提升，使得修饰器不能用于函数。类是不会提升的，所以就没有这方面的问题。
另一方面，如果一定要修饰函数，可以采用高阶函数的形式直接执行。
function doSomething(name) {
console.log('Hello, ’ + name);
}
function loggingDecorator(wrapped) {
return function() {
console.log(‘Starting’);
const result = wrapped.apply(this, arguments);
console.log(‘Finished’);
return result;
}
}
const wrapped = loggingDecorator(doSomething);
core-decorators.js
core-decorators.js是一个第三方模块，提供了几个常见的修饰器，通过它可以更好地理解修饰器。
（1）@autobind
autobind修饰器使得方法中的this对象，绑定原始对象。
import { autobind } from ‘core-decorators’;
class Person {
@autobind
getPerson() {
return this;
}
}
let person = new Person();
let getPerson = person.getPerson;
getPerson() === person;
// true
（2）@readonly
readonly修饰器使得属性或方法不可写。
import { readonly } from ‘core-decorators’;
class Meal {
@readonly
entree = ‘steak’;
}
var dinner = new Meal();
dinner.entree = ‘salmon’;
// Cannot assign to read only property ‘entree’ of [object Object]
（3）@override
override修饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。
import { override } from ‘core-decorators’;
class Parent {
speak(first, second) {}
}
class Child extends Parent {
@override
speak() {}
// SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}
// or
class Child extends Parent {
@override
speaks() {}
// SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
//
// Did you mean “speak”?
}
（4）@deprecate (别名@deprecated)
deprecate或deprecated修饰器在控制台显示一条警告，表示该方法将废除。
import { deprecate } from ‘core-decorators’;
class Person {
@deprecate
facepalm() {}
@deprecate(‘We stopped facepalming’)
facepalmHard() {}
@deprecate(‘We stopped facepalming’, { url: ‘http://knowyourmeme.com/memes/facepalm’ })
facepalmHarder() {}
}
let person = new Person();
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming
person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
// See http://knowyourmeme.com/memes/facepalm for more details.
//
（5）@suppressWarnings
suppressWarnings修饰器抑制deprecated修饰器导致的console.warn()调用。但是，异步代码发出的调用除外。
import { suppressWarnings } from ‘core-decorators’;
class Person {
@deprecated
facepalm() {}
@suppressWarnings
facepalmWithoutWarning() {
this.facepalm();
}
}
let person = new Person();
person.facepalmWithoutWarning();
// no warning is logged
使用修饰器实现自动发布事件
我们可以使用修饰器，使得对象的方法被调用时，自动发出一个事件。
const postal = require(“postal/lib/postal.lodash”);
export default function publish(topic, channel) {
const channelName = channel || ‘/’;
const msgChannel = postal.channel(channelName);
msgChannel.subscribe(topic, v => {
console.log('频道: ', channelName);
console.log('事件: ', topic);
console.log('数据: ', v);
});
return function(target, name, descriptor) {
const fn = descriptor.value;
descriptor.value = function() {
let value = fn.apply(this, arguments);
msgChannel.publish(topic, value);
};
};
}
上面代码定义了一个名为publish的修饰器，它通过改写descriptor.value，使得原方法被调用时，会自动发出一个事件。它使用的事件“发布/订阅”库是Postal.js。
它的用法如下。
// index.js
import publish from ‘./publish’;
class FooComponent {
@publish(‘foo.some.message’, ‘component’)
someMethod() {
return { my: ‘data’ };
}
@publish(‘foo.some.other’)
anotherMethod() {
// …
}
}
let foo = new FooComponent();
foo.someMethod();
foo.anotherMethod();
以后，只要调用someMethod或者anotherMethod，就会自动发出一个事件。
$ bash-node index.js
频道: component
事件: foo.some.message
数据: { my: ‘data’ }
频道: /
事件: foo.some.other
数据: undefined
Mixin
在修饰器的基础上，可以实现Mixin模式。所谓Mixin模式，就是对象继承的一种替代方案，中文译为“混入”（mix in），意为在一个对象之中混入另外一个对象的方法。
请看下面的例子。
const Foo = {
foo() { console.log(‘foo’) }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo() // ‘foo’
上面代码之中，对象Foo有一个foo方法，通过Object.assign方法，可以将foo方法“混入”MyClass类，导致MyClass的实例obj对象都具有foo方法。这就是“混入”模式的一个简单实现。
下面，我们部署一个通用脚本mixins.js，将 Mixin 写成一个修饰器。
export function mixins(…list) {
return function (target) {
Object.assign(target.prototype, …list);
};
}
然后，就可以使用上面这个修饰器，为类“混入”各种方法。
import { mixins } from ‘./mixins’;
const Foo = {
foo() { console.log(‘foo’) }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // “foo”
通过mixins这个修饰器，实现了在MyClass类上面“混入”Foo对象的foo方法。
不过，上面的方法会改写MyClass类的prototype对象，如果不喜欢这一点，也可以通过类的继承实现 Mixin。
class MyClass extends MyBaseClass {
/* … */
}
上面代码中，MyClass继承了MyBaseClass。如果我们想在MyClass里面“混入”一个foo方法，一个办法是在MyClass和MyBaseClass之间插入一个混入类，这个类具有foo方法，并且继承了MyBaseClass的所有方法，然后MyClass再继承这个类。
let MyMixin = (superclass) => class extends superclass {
foo() {
console.log(‘foo from MyMixin’);
}
};
上面代码中，MyMixin是一个混入类生成器，接受superclass作为参数，然后返回一个继承superclass的子类，该子类包含一个foo方法。
接着，目标类再去继承这个混入类，就达到了“混入”foo方法的目的。
class MyClass extends MyMixin(MyBaseClass) {
/* … */
}
let c = new MyClass();
c.foo(); // “foo from MyMixin”
如果需要“混入”多个方法，就生成多个混入类。
class MyClass extends Mixin1(Mixin2(MyBaseClass)) {
/* … */
}
这种写法的一个好处，是可以调用super，因此可以避免在“混入”过程中覆盖父类的同名方法。
let Mixin1 = (superclass) => class extends superclass {
foo() {
console.log(‘foo from Mixin1’);
if (super.foo) super.foo();
}
};
let Mixin2 = (superclass) => class extends superclass {
foo() {
console.log(‘foo from Mixin2’);
if (super.foo) super.foo();
}
};
class S {
foo() {
console.log(‘foo from S’);
}
}
class C extends Mixin1(Mixin2(S)) {
foo() {
console.log(‘foo from C’);
super.foo();
}
}
上面代码中，每一次混入发生时，都调用了父类的super.foo方法，导致父类的同名方法没有被覆盖，行为被保留了下来。
new C().foo()
// foo from C
// foo from Mixin1
// foo from Mixin2
// foo from S
Trait
Trait 也是一种修饰器，效果与 Mixin 类似，但是提供更多功能，比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。
下面采用traits-decorator这个第三方模块作为例子。这个模块提供的traits修饰器，不仅可以接受对象，还可以接受 ES6 类作为参数。
import { traits } from ‘traits-decorator’;
class TFoo {
foo() { console.log(‘foo’) }
}
const TBar = {
bar() { console.log(‘bar’) }
};
@traits(TFoo, TBar)
class MyClass { }
let obj = new MyClass();
obj.foo() // foo
obj.bar() // bar
上面代码中，通过traits修饰器，在MyClass类上面“混入”了TFoo类的foo方法和TBar对象的bar方法。
Trait 不允许“混入”同名方法。
import { traits } from ‘traits-decorator’;
class TFoo {
foo() { console.log(‘foo’) }
}
const TBar = {
bar() { console.log(‘bar’) },
foo() { console.log(‘foo’) }
};
@traits(TFoo, TBar)
class MyClass { }
// 报错
// throw new Error(‘Method named: ’ + methodName + ’ is defined twice.’);
// ^
// Error: Method named: foo is defined twice.
上面代码中，TFoo和TBar都有foo方法，结果traits修饰器报错。
一种解决方法是排除TBar的foo方法。
import { traits, excludes } from ‘traits-decorator’;
class TFoo {
foo() { console.log(‘foo’) }
}
const TBar = {
bar() { console.log(‘bar’) },
foo() { console.log(‘foo’) }
};
@traits(TFoo, TBar::excludes(‘foo’))
class MyClass { }
let obj = new MyClass();
obj.foo() // foo
obj.bar() // bar
上面代码使用绑定运算符（::）在TBar上排除foo方法，混入时就不会报错了。
另一种方法是为TBar的foo方法起一个别名。
import { traits, alias } from ‘traits-decorator’;
class TFoo {
foo() { console.log(‘foo’) }
}
const TBar = {
bar() { console.log(‘bar’) },
foo() { console.log(‘foo’) }
};
@traits(TFoo, TBar::alias({foo: ‘aliasFoo’}))
class MyClass { }
let obj = new MyClass();
obj.foo() // foo
obj.aliasFoo() // foo
obj.bar() // bar
上面代码为TBar的foo方法起了别名aliasFoo，于是MyClass也可以混入TBar的foo方法了。
alias和excludes方法，可以结合起来使用。
@traits(TExample::excludes(‘foo’,‘bar’)::alias({baz:‘exampleBaz’}))
class MyClass {}
上面代码排除了TExample的foo方法和bar方法，为baz方法起了别名exampleBaz。
as方法则为上面的代码提供了另一种写法。
@traits(TExample::as({excludes:[‘foo’, ‘bar’], alias: {baz: ‘exampleBaz’}}))
class MyClass {}
Babel 转码器的支持
目前，Babel 转码器已经支持 Decorator。
首先，安装@babel/core和@babel/plugin-proposal-decorators。由于后者包括在@babel/preset-stage-0之中，所以改为安装@babel/preset-stage-0亦可。
$ npm install @babel/core @babel/plugin-proposal-decorators
然后，设置配置文件.babelrc。
{
“plugins”: ["@babel/plugin-proposal-decorators"]
}
这时，Babel 就可以对 Decorator 转码了。
如果要使用 Decorator 的早期规格，必须将legacy属性设为true，默认为false。
{
“plugins”: [
["@babel/plugin-proposal-decorators", { “legacy”: true }]
]
}
脚本中打开的命令如下。
require("@babel/core").transform(“code”, {
plugins: ["@babel/plugin-proposal-decorators"]
});
Babel 的官方网站提供一个在线转码器，只要勾选 Experimental，就能支持 Decorator 的在线转码。