ES6学习笔记4-Proxy、Reflect、Decorator、Module

时间 2019-11-08

标签 es6 学习笔记 proxy reflect decorator module 栏目 JavaScript 繁體版

原文原文链接

Proxy

Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操做，能够译为“代理器”，即用本身的定义覆盖了语言的原始定义。ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。node

var proxy = new Proxy(target, handler);

上面代码中的new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。es6

var a={};
var proxy = new Proxy(a, {
  get: function(target, property) {
    return 35;
  }
});
proxy.tt="1";
proxy.tt    //35
a.tt    //"1"

上面代码中，对于proxy来讲，与a对象除了get方法不同，其余所有同样。且对proxy 的操做就至关于对a进行操做。express

要使得Proxy起做用，必须针对Proxy实例（上例是proxy对象）进行操做，而不是针对目标对象（上例是空对象）进行操做。json

若是handler没有设置任何拦截，那就等同于直接通向原对象。数组

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。浏览器

Proxy 支持的拦截操做

对于能够设置、但没有设置拦截的操做，则直接落在目标对象上，按照原先的方式产生结果。缓存

get(target, propKey, receiver):拦截对象属性的读取，好比proxy.foo和proxy['foo']。最后一个参数receiver是一个对象，可选。
set(target, propKey, value, receiver)：拦截对象属性的设置，好比proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
has(target, propKey)：拦截propKey in proxy的操做，返回一个布尔值。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操做，返回一个布尔值。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回目标对象全部自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。

若是目标对象是函数，那么还有两种额外操做能够拦截。app

apply(target, object, args)：拦截 Proxy 实例做为函数的调用、call和apply操做，好比proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例做为构造函数调用的操做，好比new proxy(...args)。

Proxy.revocable()

Proxy.revocable方法返回一个可取消的 Proxy 实例。异步

let target = {};
let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked

Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，能够取消Proxy实例。上面代码中，当执行revoke函数以后，再访问Proxy实例，就会抛出一个错误。async

Proxy.revocable的一个使用场景是，目标对象不容许直接访问，必须经过代理访问，一旦访问结束，就收回代理权，不容许再次访问。

this 问题

虽然 Proxy 能够代理针对目标对象的访问，但它不是目标对象的透明代理，即不作任何拦截的状况下，也没法保证与目标对象的行为一致。主要缘由就是在 Proxy 代理的状况下，目标对象内部的this关键字会指向 Proxy 代理。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

上面代码中，一旦proxy代理，后者内部的this就是指向proxy，而不是target。

此外，有些原生对象的内部属性，只有经过正确的this才能拿到，因此 Proxy 也没法代理这些原生对象的属性。

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);

proxy.getDate();
// TypeError: this is not a Date object.

上面代码中，getDate方法只能在Date对象实例上面拿到，若是this不是Date对象实例就会报错。这时，this绑定原始对象，就能够解决这个问题。

const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);

proxy.getDate() //1

Reflect

Reflect对象的设计目的有如下几个：

将Object对象的一些明显属于语言内部的方法（好比Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，将来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上能够拿到语言内部的方法。
修改某些Object方法的返回结果，让其变得更合理。好比，Object.defineProperty(obj, name, desc)在没法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
让Object操做都变成函数行为。某些Object操做是命令式，好比name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

静态方法

Reflect对象一共有13个静态方法。

Reflect.apply(target,thisArg,args):Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。
Reflect.construct(target,args):Reflect.construct方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。
Reflect.get(target,name,receiver):Reflect.get方法查找并返回target对象的name属性，若是没有该属性，则返回undefined。
Reflect.set(target,name,value,receiver):Reflect.set方法设置target对象的name属性等于value。
Reflect.defineProperty(target,name,desc):Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。将来，后者会被逐渐废除，请从如今开始就使用Reflect.defineProperty代替它。
Reflect.deleteProperty(target,name):Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。
Reflect.has(target,name):Reflect.has方法对应name in obj里面的in运算符。
Reflect.ownKeys(target):Reflect.ownKeys方法用于返回对象的全部属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。
Reflect.isExtensible(target):Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。
Reflect.preventExtensions(target):Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操做成功。
Reflect.getOwnPropertyDescriptor(target, name):Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于获得指定属性的描述对象，未来会替代掉后者。
Reflect.getPrototypeOf(target):Reflect.getPrototypeOf方法用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)。
Reflect.setPrototypeOf(target, prototype):Reflect.setPrototypeOf方法用于设置对象的__proto__属性，返回第一个参数对象，对应Object.setPrototypeOf(obj, newProto)。

Decorator

类和方法的修饰

修饰器（Decorator）是一个函数，用来修改类的行为。这是 ES 的一个提案，目前 Babel 转码器已经支持。
下面的@decorator就是一个修饰器。

@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;


@testable
class MyTestableClass {
  // ...
}
function testable(target) {
  target.isTestable = true;
}
MyTestableClass.isTestable // true
//@testable就是一个修饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。target指会被修饰的类。

注意，修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数。

修饰器函数的第一个参数，就是所要修饰的目标类。

function 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

修饰器也能够修饰类的属性。

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
//修饰器readonly用来修饰“类”的name方法。

修饰器函数修饰类的属性时一共能够接受三个参数，第一个参数是所要修饰的目标对象，第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。

若是同一个方法有多个修饰器，会像剥洋葱同样，先从外到内进入，而后由内向外执行。

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)先执行。

修饰器只能用于类和类的方法，不能用于函数，由于存在函数提高，而类是不会提高的。

core-decorators.js

core-decorators.js是一个第三方模块，提供了几个常见的修饰器。

@autobind：autobind修饰器使得方法中的this对象，绑定原始对象。
@readonly：readonly修饰器使得属性或方法不可写。
@override：override修饰器检查子类的方法，是否正确覆盖了父类的同名方法，若是不正确会报错。
@deprecate (别名@deprecated)：deprecate或deprecated修饰器在控制台显示一条警告，表示该方法将废除。
@suppressWarnings：suppressWarnings修饰器抑制decorated修饰器致使的console.warn()调用。可是，异步代码发出的调用除外。

Mixin

在修饰器的基础上，能够实现Mixin模式。所谓Mixin模式，就是在一个对象之中混入另一个对象的方法。

//部署一个通用脚本mixins.js，将mixin写成一个修饰器。
export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}


//经过mixins这个修饰器，实现了在MyClass类上面“混入”Foo对象的foo方法。
import { mixins } from './mixins';
const Foo = {
  foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // "foo"

Module

ES6 模块经过export命令显式指定输出的代码，再经过import命令输入。 ES6 模块是编译时加载，使得静态分析成为可能。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其余方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 能够在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

严格模式

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）

ES6 模块之中，顶层的this指向undefined，即不该该在顶层代码使用this。

export 命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其余模块提供的功能。

一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。若是你但愿外部可以读取模块内部的某个变量，就必须使用export关键字输出该变量。

export的正确写法：

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};//在export命令后面，使用大括号指定所要输出的一组变量。应优先使用该写法。

// 写法三
var n = 1;
export {n as m};

export命令除了输出变量，还能够输出函数或类（class）。一般状况下，export输出的变量就是原本的名字，可是可使用as关键字重命名。

export function f() {};

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};
//代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2能够用不一样的名字输出两次。

export语句输出的接口，与其对应的值是动态绑定关系，即经过该接口，能够取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500毫秒以后变成baz。这一点与 CommonJS 规范彻底不一样。CommonJS 模块输出的是值的缓存，不存在动态更新。

export命令能够出如今模块的任何位置，只要处于模块顶层就能够。若是处于块级做用域内，就会报错，import命令也是如此。这是由于处于条件代码块之中，就无法作静态优化。

function foo() {
  export default 'bar' // SyntaxError
}
foo()
//export语句放在函数之中，结果报错。

import 命令

使用export命令定义了模块的对外接口之后，其余 JS 文件就能够经过import命令加载这个模块。

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其余模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
若是想为输入的变量从新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile';

import后面的from指定模块文件的位置，能够是相对路径，也能够是绝对路径，.js路径能够省略。若是只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import {myMethod} from 'util';
//util是模块文件名，因为不带有路径，必须经过配置，告诉引擎怎么取到这个模块。

import命令具备提高效果，会提高到整个模块的头部，首先执行。这是由于import命令是编译阶段执行的，在代码运行以前。

foo();
import { foo } from 'my_module';
//该代码不会报错，由于import的执行早于foo的调用。

因为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语句，那么只会执行一次，而不会执行屡次。

import 'lodash';
import 'lodash';

上面代码加载了两次lodash，仅执行一次lodash，且不输入任何值。

//foo和bar在两个语句中加载，可是它们对应的是同一个my_module实例。
import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';

模块的总体加载

模块总体加载即用星号（*）指定一个对象，全部输出值都加载在这个对象上面。

下面是一个circle.js文件，它输出两个方法area和circumference。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

如今，加载这个模块。

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 命令

export default命令，为模块指定默认输出。其余模块加载该模块时，import命令能够为该输出指定任意名字。export default后面不须要使用大括号，且export default命令只能使用一次。

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default'; //这时的import命令后面，不使用大括号。
customName(); // 'foo'

export default命令用在非匿名函数前，也是能够的。

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}
export default foo;//export default后面没有使用大括号。

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

默认输出和正常输出的比较：使用export default时，对应的import语句不须要使用大括号，名字可任意；不使用export default时，对应的import语句须要使用大括号，名字须与被导入模块对外接口的名称相同。

// 第一组
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入



// 第二组
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入

本质上，export default命令是将该命令后面的值，赋给default变量之后再输出，即输出一个叫作default的变量或方法，而后系统容许你为它取任意名字。因此，下面的写法是有效的。

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

export default命令后面不能跟变量声明语句，由于它只是输出一个叫作default的变量。

// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;


// 正确
export default 42; //正确是由于指定外对接口为default。
// 报错
export 42;//报错是由于没有指定对外的接口。

若是想在一条import语句中，同时输入默认方法和其余变量，能够写成下面这样。

export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };//该行语句的意思是暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法。

import _, { each } from 'lodash';

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 { default } from 'foo';

模块的继承

模块之间也能够继承。
假设有一个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变量和默认方法。

跨模块常量

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

import()

import命令会被 JavaScript 引擎静态分析，先于模块内的其余模块执行，属于编译时加载。有一个提案，建议引入import()函数，完成动态加载，即运行时加载模块。

import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令可以接受什么参数，import()函数就能接受什么参数，二者区别主要是后者为动态加载。

import()返回一个 Promise 对象。import()加载模块成功之后，这个模块会做为一个对象，看成then方法的参数。下面是一个例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数能够用在任何地方，不只仅是模块，非模块的脚本也可使用。它是运行时执行，也就是说，何时运行到这一句，就会加载指定的模块。import()相似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

适用场合

按需加载：import()能够在须要的时候，再加载某个模块。
条件加载：import()能够放在if代码块，根据不一样的状况，加载不一样的模块。

动态的模块路径：import()容许模块路径动态生成。

import(f())
.then(...);
//代码中，根据函数f的返回结果，加载不一样的模块。

注意点

import()加载模块成功之后，这个模块会做为一个对象，看成then方法的参数。所以，可使用对象解构赋值的语法，获取输出接口。若是模块有default输出接口，能够用参数直接得到。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

若是想同时加载多个模块，能够采用下面的写法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import()也能够用在 async 函数之中。

Module 的加载实现

浏览器加载

传统方法

浏览器容许脚本异步加载，下面就是两种异步加载的语法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本之后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，若是有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

加载规则

浏览器加载 ES6 模块，也使用<script>标签，可是要加入type="module"属性。

<script type="module" src="foo.js"></script>

上面代码在网页中插入一个模块foo.js，因为type属性设为module，因此浏览器知道这是一个 ES6 模块。

浏览器对于带有type="module"的<script>，都是异步加载，不会形成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>

<script type="module" src="foo.js" async></script>

ES6 模块也容许内嵌在网页中，语法行为与加载外部脚本彻底一致。

<script type="module">
  import utils from "./utils.js";

  // other code
</script>

对于外部的模块脚本（上例是foo.js），有几点须要注意：

代码是在模块做用域之中运行，而不是在全局做用域运行。模块内部的顶层变量，外部不可见。
模块脚本自动采用严格模式，无论有没有声明use strict。
模块之中，可使用import命令加载其余模块（.js后缀不可省略，须要提供绝对 URL 或相对 URL），也可使用export命令输出对外接口。
模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无心义的。
同一个模块若是加载屡次，将只执行一次。

ES6 模块与 CommonJS 模块的差别

有两个重大差别：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

第二个差别是由于 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6 模块的运行机制与 CommonJS 不同。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。所以，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指向的地址是只读的，不能从新赋值。

export经过接口，输出的是同一个值。不一样的脚本加载这个接口，获得的都是一样的实例。

Node 加载

Node 对 ES6 模块的处理比较麻烦，由于它有本身的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将二者分开，ES6 模块和 CommonJS 采用各自的加载方案。

在静态分析阶段，一个模块脚本只要有一行import或export语句，Node 就会认为该脚本为 ES6 模块，不然就为 CommonJS 模块。若是不输出任何接口，可是但愿被 Node 认为是 ES6 模块，能够在脚本中加一行语句。

export {};//不输出任何接口的 ES6 标准写法。

若是不指定绝对路径，Node 加载 ES6 模块会依次寻找如下脚本，与require()的规则一致。

import './foo';
// 依次寻找
//   ./foo.js
//   ./foo/package.json
//   ./foo/index.js

import 'baz';
// 依次寻找
//   ./node_modules/baz.js
//   ./node_modules/baz/package.json
//   ./node_modules/baz/index.js
// 寻找上一级目录
//   ../node_modules/baz.js
//   ../node_modules/baz/package.json
//   ../node_modules/baz/index.js
// 再上一级目录

ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是二者的一个重大差别。

import 命令加载 CommonJS 模块

Node 采用 CommonJS 模块格式，模块的输出都定义在module.exports这个属性上面。在 Node 环境中，使用import命令加载 CommonJS 模块，Node 会自动将module.exports属性，看成模块的默认输出，即等同于export default。

CommonJS 模块的输出缓存机制，在 ES6 加载方式下依然有效。

因为 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();

require 命令加载 ES6 模块

采用require命令加载 ES6 模块时，ES6 模块的全部输出接口，会成为输入对象的属性。

// es.js
let foo = {bar:'my-default'};
export default foo;
foo = null;

// cjs.js
const es_namespace = require('./es');
console.log(es_namespace.default);
// {bar:'my-default'}

上面代码中，default接口变成了es_namespace.default属性。另外，因为存在缓存机制，es.js对foo的从新赋值没有在模块外部反映出来。

循环加载

“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。

一般，“循环加载”表示存在强耦合，若是处理很差，还可能致使递归加载，使得程序没法执行，所以应该避免出现。

CommonJS模块的加载原理

CommonJS的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，而后在内存生成一个对象。之后须要用到这个模块的时候，就会到exports属性上面取值。即便再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS模块不管加载多少次，都只会在第一次加载时运行一次，之后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

上面代码就是Node内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其余还有不少属性。

CommonJS模块的循环加载

CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会所有执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。例如：

//脚本文件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接着往下执行，直到执行完毕。

ES6模块的循环加载

ES6模块是动态引用，若是使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，须要开发者本身保证，真正取值的时候可以取到值。

// a.js以下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';

// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';

//运行结果
b.js
undefined
a.js
bar

上面代码中，因为a.js的第一行是加载b.js，因此先执行的是b.js。而b.js的第一行又是加载a.js，这时因为a.js已经开始执行了，因此不会重复执行，而是继续往下执行b.js，因此第一行输出的是b.js。

接着，b.js要打印变量foo，这时a.js还没执行完，取不到foo的值，致使打印出来是undefined。b.js执行完，开始执行a.js，这时就一切正常了。

ES6模块的转码

浏览器目前还不支持ES6模块，为了如今就能使用，能够将转为ES5的写法。除了Babel能够用来转码以外，还有如下两个方法，也能够用来转码。

ES6 module transpiler：能够将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法，从而在浏览器中使用。
SystemJS：能够在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块，将其转为 ES5 格式。

参考自：ECMAScript 6 入门