1. 概述
ES6 模塊是編譯時(shí)加載翘簇。
2. 嚴(yán)格模式
ES6 的模塊自動(dòng)采用嚴(yán)格模式锋爪，不管你有沒(méi)有在模塊頭部加上"use strict";。
嚴(yán)格模式主要有以下限制：
- 變量必須聲明后再使用
- 函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)
- 不能使用with語(yǔ)句
- 不能對(duì)只讀屬性賦值速和，否則報(bào)錯(cuò)
- 不能使用前綴 0 表示八進(jìn)制數(shù)廊散，否則報(bào)錯(cuò)
- 不能刪除不可刪除的屬性桑滩，否則報(bào)錯(cuò)
- 不能刪除變量delete prop，會(huì)報(bào)錯(cuò)，只能刪除屬性delete global[prop]
- eval不會(huì)在它的外層作用域引入變量
- eval和arguments不能被重新賦值
- arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局對(duì)象
- 不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
- 增加了保留字（比如protected运准、static和interface）
其中幌氮，尤其需要注意this的限制。ES6 模塊之中胁澳，頂層的this指向undefined该互，即不應(yīng)該在頂層代碼使用this。
3. export 命令
模塊功能主要由兩個(gè)命令構(gòu)成：export 和 import韭畸。 export 命令用于規(guī)定模塊的對(duì)外接口宇智，import 命令用于輸入其他模塊提供的功能
一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量胰丁，外部無(wú)法獲取随橘。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量锦庸。下面是一個(gè) JS 文件机蔗，里面使用export命令輸出變量。
// profile.js
export var firstName = 'Mick';
export var lastName = 'Jack';
export var year = 1985;
上面代碼是profile.js文件甘萧，保存了用戶信息萝嘁。ES6 將其視為一個(gè)模塊，里面用export命令對(duì)外部輸出了三個(gè)變量扬卷。
export 的寫法牙言，除了像上面這樣，還有另外一種：
// profile.js
var firstName = 'Mick';
var lastName = 'Jack';
var year = 1985;
export { firstName, lastName, year }
應(yīng)該優(yōu)先考慮使用這種寫法邀泉。因?yàn)檫@樣就可以在腳本尾部嬉挡，一眼看清楚輸出了哪些變量。
export 命令除了輸出變量汇恤，還可以輸出函數(shù)或類(class)
export function multiply(x, y){
return x * y;
}
上面代碼對(duì)外輸出一個(gè)函數(shù)multiply庞钢。
通常情況下，export 輸出的變量就是本來(lái)的名字因谎，但是可以使用as關(guān)鍵字重命名
function f1() {}
function f2() {}
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
}
上面代碼使用as關(guān)鍵字基括，重命名了函數(shù)v1和v2的對(duì)外接口。重命名后财岔，v2可以用不同的名字輸出兩次风皿。
需要特別注意的是，export命令規(guī)定的是對(duì)外的接口匠璧，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系桐款。
// 報(bào)錯(cuò)
export 1;
// 報(bào)錯(cuò)
var m = 1;
export m;
上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆](méi)有提供對(duì)外的接口夷恍。第一種寫法直接輸出 1魔眨，第二種寫法通過(guò)變量m，還是直接輸出 1。1只是一個(gè)值遏暴，不是接口侄刽。正確的寫法是下面這樣。
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m}
// 寫法三
var n = 1;
export {n as m}
上面這三種的實(shí)質(zhì)是朋凉，在接口名與模塊內(nèi)部變量之間州丹，建立了一一對(duì)應(yīng)的關(guān)系。
同樣的杂彭， function和class的輸出墓毒，也必須遵守這樣的寫法
// 報(bào)錯(cuò)
function f() {}
expoer f;
// 正確
export function f() {};
// 正確
function f(){}
expoer {f}
最后，export命令可以出現(xiàn)在模塊的任何位置亲怠，只要處于模塊頂層就可以蚁鳖。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)
function foo() {
export default 'bar' // SyntaxError
}
foo()
4. import 命令
使用export命令定義了模塊的對(duì)外接口以后赁炎，其他 JS 文件就可以通過(guò)import命令加載這個(gè)模塊。
// main.js
import { firstName, lastName, year } from './profile.js'
function setName(element){
element.textContent = firstName + ' ' + lastName;
}
如果想為輸入的變量重新取一個(gè)名字钾腺，import命令要使用as關(guān)鍵字徙垫，將輸入的變量重命名
import { lastName as surname } from './profile.js'
import命令輸入的變量都是只讀的，因?yàn)樗谋举|(zhì)是輸入接口放棒。也就是說(shuō)姻报，不允許在加載模塊的腳本里面，改寫接口间螟。
import { a } from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
但是吴旋，如果a是一個(gè)對(duì)象，改寫a的屬性書允許的
import { a } from './xxx.js'
a.foo = 'hello'; // 合法操作
上面代碼中厢破，a的屬性可以成功改寫荣瑟，并且其他模塊也可以讀到改寫后的值。不過(guò)摩泪，這種寫法很難查錯(cuò)笆焰，建議凡是輸入的變量，都當(dāng)作完全只讀见坑，輕易不要改變它的屬性嚷掠。
注意，import命令具有提升效果荞驴，會(huì)提升到整個(gè)模塊的頭部不皆，首先執(zhí)行。
foo();
import { foo } from 'my_module';
上面的代碼不會(huì)報(bào)錯(cuò)熊楼，因?yàn)閕mport的執(zhí)行早于foo的調(diào)用霹娄。這種行為的本質(zhì)是，import命令是編譯階段執(zhí)行的，在代碼運(yùn)行之前项棠。
5. 模塊的整體加載
除了指定加載某個(gè)輸出值悲雳，還可以使用整體加載，即用星號(hào)（*）指定一個(gè)對(duì)象香追，所有輸出值都加載在這個(gè)對(duì)象上面合瓢。
// 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('圓周長(zhǎng)：' + circumference(14));
上面寫法是逐一指定要加載的方法，整體加載的寫法如下：
import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長(zhǎng)：' + circle.circumference(14));
注意透典，模塊整體加載所在的那個(gè)對(duì)象（上例是circle）晴楔，應(yīng)該是可以靜態(tài)分析的，所以不允許運(yùn)行時(shí)改變峭咒。下面的寫法都是不允許的税弃。
import * as circle from './circle';
// 下面兩行都是不允許的
circle.foo = 'hello';
circle.area = function () {};
6. export default 命令
從前面的例子可以看出，使用import命令的時(shí)候凑队，用戶需要知道所要加載的變量名或函數(shù)名则果，否則無(wú)法加載。但是漩氨，用戶肯定希望快速上手西壮，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法叫惊。
為了給用戶提供方便款青，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令霍狰，為模塊指定默認(rèn)輸出抡草。
export default function(){
console.log('foo');
}
上面代碼是一個(gè)模塊文件export-default.js，它的默認(rèn)輸出是一個(gè)函數(shù)蔗坯。
其他模塊加載該模塊時(shí)康震，import命令可以為該匿名函數(shù)指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
export default 命令用在非匿名函數(shù)前宾濒，也是可以的签杈。
export default function foo(){
console.log('foo')
}
// 或者寫成
function foo(){
console.log('foo');
}
export default foo;
下面比較一下默認(rèn)輸出和正常輸出。
// 第一組
export default function crc32() { // 輸出
// ...
}
import crc32 from 'crc32'; // 輸入
// 第二組
export function crc32() { // 輸出
// ...
};
import {crc32} from 'crc32'; // 輸入
export default命令用于指定模塊的默認(rèn)輸出鼎兽。顯然答姥，一個(gè)模塊只能有一個(gè)默認(rèn)輸出，因此export default命令只能使用一次谚咬。所以鹦付，import命令后面才不用加大括號(hào)，因?yàn)橹豢赡芪ㄒ粚?duì)應(yīng)export default命令择卦。
本質(zhì)上敲长，export default就是輸出一個(gè)叫做default的變量或方法郎嫁，然后系統(tǒng)允許你為它取任意名字。
正是因?yàn)閑xport default命令其實(shí)只是輸出一個(gè)叫做default的變量祈噪，所以它后面不能跟變量聲明語(yǔ)句泽铛。
// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯(cuò)誤
export default var a = 1;
`export default`也可以用來(lái)輸出類
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass'
let o = new MyClass();
7. export 與 import 的復(fù)合寫法
如果在一個(gè)模塊之中，先輸入后輸出同一個(gè)模塊辑鲤，import語(yǔ)句可以與export語(yǔ)句寫在一起
export { foo, bar } from 'my_module';
// 可以簡(jiǎn)單理解為
import { foo, bar } from 'my_module';
export { foo, bar };
上面代碼中盔腔，export和import語(yǔ)句可以結(jié)合在一起，寫成一行月褥。但需要注意的是弛随，寫成一行以后，foo和bar實(shí)際上并沒(méi)有被導(dǎo)入當(dāng)前模塊宁赤，只是相當(dāng)于對(duì)外轉(zhuǎn)發(fā)了這兩個(gè)接口舀透，導(dǎo)致當(dāng)前模塊不能直接使用foo和bar。
模塊的接口改名和整體輸出决左，也可以采用這種寫法：
// 接口改名
export { foo as myfoo } from 'my_module';
// 整體輸出
export * from 'my_module'
export { default as es6 } from './someModule';
8. 模塊的繼承
假設(shè)有一個(gè)circleplus模塊愕够，繼承了circle模塊。
// circleplus.js
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
9. 跨模塊常量
const聲明的常量只在當(dāng)前代碼塊有效佛猛。如果想設(shè)置跨模塊的常量（即跨多個(gè)文件）链烈，或者說(shuō)一個(gè)值要被多個(gè)模塊共享，可以采用下面的寫法挚躯。
// 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
如果要使用的常量非常多，可以建一個(gè)專門的 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 里面
// constants/index.js
export { db } from './db';
export { users } from './users';
使用的時(shí)候硼瓣，直接加載 index.js 就可以了
import { db, users } from './index'
10. import()
import()用來(lái)做動(dòng)態(tài)加載，目前只是一個(gè)提案置谦。
