ES6的export和import

ES6中的模块加载

ES6 模块是编译时加载，编译时就能确定模块的依赖关系，以及输入和输出的变量，相比于CommonJS 和 AMD 模块都只能在运行时确定输入输出变量的加载效率要高。

严格模式

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）

其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this

export 命令

一个模块就是一个独立的文件，该文件内部的所有变量，外部都无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

如果你没引入变量，即使你引入执行了该模块你仍然无法获取模块的变量。

// a.js
let str = 'aaaa'//b.js
import './a.js'     //相当于执行了 a.js 文件代码
console.log(str);   //报错  str is not defined

export命令可以出现在模块的任何位置，但必须处于模块顶层，如果处于块级作用域内，就会报错（即不能包含在任何代码块中，比如不能在函数体内）。

export 命令有多种写法，下面将逐一介绍：

export 后面直接加声明语句（export var a = ''）

// a.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export function fn(x, y) {
return x * y;
};// 此时的导入import语法
import {firstName, lastName, year} from './a.js'

使用大括号指定输出（export {}）

这是推荐使用的输出方式，因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

// a.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };// 此时的导入语法
import {firstName, lastName, year} from './a.js'

在export命令后面，使用大括号指定所要输出的一组变量与 export 直接加声明语句是等价的，但是应该优先考虑使用这种写法。

as关键字重命名（export {a as newName}）

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。as 关键字后面的变量名是输出的名字。

let str = 'aaa'
function v1() { ... }
function v2() { ... }
export {str as str2,v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion
};// 此时的导入语法
// 此时不能用之前的名字导入，只能用重命名后的名字导入
import {str2, streamV1, streamV2, streamLatestVersion} from "./index";

使用重命名，同一个变量可以用不同的名字输出两次，这样在外部可以用不同的名字引入该变量。

export default

使用前面的语法进行输出时，输入的用户必须得知道输出的变量名才能使用，有时这并不怎么方便。使用export default命令可以为模块指定默认输出，用户可以为输入的变量起一个任意的名字，就不需要提前知道输出的变量名便可上手使用了。

使用 default 语法，后面可以直接跟变量名，这点跟其他输出语法不一样。

// a.js 输出
export default function foo() {console.log('foo');
}
//或者写成下面两种都可以
export default function() {console.log('foo');
}
function foo() {console.log('foo')
}
export default foo// 此时的导入语法
import fn from './export-default';
fn();

上面代码的import命令，可以用任意名称指向a.js输出的方法，这时就不需要知道原模块输出的函数名。default 命令后面的变量名在模块外部是无效的，同匿名函数输出的形式一致。

注意，使用 export default 命令输出的模块，import命令后面不需要大括号。一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

可以用 default 导出一个对象来导出多个值：

//a.js
export default {a() {console.log('aaa')},b() {console.log('bbb')},c: 'ccc',
}//此时的导入语法
import obj from './a.js'
obj.a() //aaa
console.log(obj.c) //ccc
//注意，此时不能用大括号导入，下面会报错
import { a, b, c } from './a.js' //报错

export 的错误语法

export命令不能直接输出变量，因为变量的值必须在运行阶段才能确定，而 export 命令的输出是在编译阶段就已经输出。

// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;

export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

• export 1 ，这里输出的是一个值 1，没有与任何模块内部变量建立联系，所以直接报错。

• var m = 1; export m; 这里看起来就像是输出了一个变量m作为对外的接口，我们可能会认为 m 这个变量被输出到模块外被使用，并且与模块内的 m 产生了引用的关系。然而现实情况是，变量m在模块中作为一个变量存在，但是通过export导出m时，被导出的只有m的值 1，所以同样不与内部变量产生联系，于是报错。

这跟函数的传参是一个道理：

let x = 1;                 //声明变量
const foo= (x) => { x=2 };    //声明一个函数
foo(x)                   //传入x
console.log(x)           //    1

上面代码中，变量 x 作为 foo 的参数，只把变量 x 的值传入 foo，x 只作为数值的载体，函数内部 x 并没有与变量 x 产生直接联系。只是复制了变量 x 的值（这种复制值然后再使用的形式与CommonJS加载模式类似）。

export default 的错误语法

export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句，与export有点相反的意思。

// 错误
export default var a = 1;

同样地，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

// 正确
export default 42;
// 报错
export 42;

export 中 default 和其他输出结合使用

export 中 default 是可以和其他输出结合使用的

// a.js 输出  下面将输出三个函数
export default function (obj) {
}
export function each(obj, iterator, context) {
}
export { each as forEach };
// b.js 输入  这里可以分别输入三个值
import  aaa, { each, forEach } from 'a.js';

import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import命令输入的变量都是只读的，不可以在加载后修改引入的变量。但如果引入的变量是对象的话，可以修改对象的属性，但非常不推荐使用。

import {obj} from './a.js'
obj = {}; // Syntax Error : 'obj' is read-only;

上面代码中，对引入变量重新赋值就会报错。但是，如果a是一个对象，改写a的属性是允许的，但非常不推荐修改引入的变量，因为其他引入的模块也可以读到改写后的值，这种写法很难查错，所以凡是输入的变量，都当作完全只读，轻易不要改变它的属性。

import命令具有提升效果，会提升到整个模块的头部，首先执行，因为 import 命令是编译阶段执行的，在代码运行之前。

foo();
import { foo } from 'my_module';       //这里不会报错，因为import的执行早于foo的调用

import语句会执行所加载的模块，因此可以有下面的写法。如果多次重复执行同一句import语句，那么只会执行一次模块的文件代码，而不会执行多次。因为import最终会被转换为node的require，而require会对引入文件缓存。（更多请查看这两篇文章node模块化 和 require原理 和 require与import的区别 ）

import 'a.js';//这里仅仅执行lodash模块，但是不输入任何值，所以并不能使用 a.js 里面定义的变量
//下面代码加载了两次lodash，但是只会执行一次。
import 'lodash';
import 'lodash';
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';

目前阶段，通过 Babel 转码，require命令和import命令可以写在同一个模块里面，但是最好不要这样做。因为import在静态解析阶段执行，所以它是一个模块之中最早执行的。

//下面的代码可能不会得到预期结果，因为import将会于require之前执行
require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

import 的语法有多种，下面将逐一介绍：

import {} from 'xxx.js'

// a.js 导出
var firstName = 'Michael';
var lastName = 'Jackson';
export { firstName, lastName};// b.js 引入
import { firstName, lastName} from './a.js';
//引入后可以直接使用
console.log(firstName,lastName)

import {a as newName} from 'xxx.js'

如果想为输入的变量重新取一个名字可以使用as关键字，将输入的变量重命名。as 关键字后面的是输入的变量名，即你想使用的名字

import { firstName as newName } from './a.js';

import * as newName from 'xxx.js'（模块的整体加载）

除了指定加载某个输出值，还可以使用整体加载，即加载模块的整个输出对象。用星号（*）指定一个对象，所有输出值都将加载在这个对象上面。

// a.js
export var area = 'aaa'
export function circumference(radius) {
return 2 * Math.PI * radius;
}//b.js
import * as newObj from './circle';
console.log(newObj .area);
console.log(newObj .circumference(14));

不允许修改整体加载的对象

import * as circle from './circle';// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

import 的错误语法

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';
}

export 和 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export { foo, bar } from 'my_module';// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。

其他的复合写法：

// 接口改名输出
export { foo as myFoo } from 'my_module';
// 等同于
import {foo} from 'mu_module'
export {foo as myFoo}// 整体输出
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';