详解 ES6 中的 export 和 import

举报
SHQ5785 发表于 2024/03/18 09:07:49 2024/03/18
【摘要】 一、ES6 中的模块加载ES6 模块是编译时加载，编译时就能确定模块的依赖关系，以及输入和输出的变量，相比于CommonJS 和 AMD 模块都只能在运行时确定输入输出变量的加载效率要高。 1.1 严格模式ES6 的模块自动采用严格模式，不管你有没有在模块头部加上 "use strict"; 语句。严格模式主要有以下限制。变量必须声明后再使用；函数的参数不能有同名属性，否则报错；不能使用w...

一、ES6 中的模块加载

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

1.1 严格模式

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 命令有多种写法，下面将逐一介绍：

2.1、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'

2.2 使用大括号指定输出（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 直接加声明语句是等价的，但是应该优先考虑使用这种写法。

2.3 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";

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

2.4 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'   //报错

2.5 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加载模式类似）。

2.5.1 export default 的错误语法

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

// 错误，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后
export default var a = 1;

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

2.6 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语句是 Singleton （单例）模式。

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 的语法有多种，下面将逐一介绍：

3.1 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)

3.2 import {a as newName} from ‘xxx.js’

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

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

3.3 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 () {};

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

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Elasticsearch JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入