记得之前的一次面试中,有个面试官问了我关于es6导入和导出的一些知识点,可惜当时对这方面没在意,只知道每次机械的import和export,也不知道为啥要这样用,现在静下心来,好好的把这块看了下,顺便把自己的学习内容记录下来,方便将来的时候翻阅。
简介:
es6模块主要是由export和import组成。一个模块就是一个独立的文件,该文件内容的变量外部无法获取。export用于规定模块的对外接口,import用于输入其他模块的功能。 它有以下的几个特点:
1,es6模块化是静态化的,编译时就能确定模块的依赖关系、输入和输出的变量。
import {path, getName} from './common'
上面代码就是从common模块加载了path和getName两个方法,而不加载其他的方法,这种加载就叫做编译时加载或者静态加载。效率比较高。
2,es6的模块自动采用严格模式。
3,注意this! 在模块中,顶层的this指向undefined,所以不要在顶层中使用this
4,export和import不能处于块级作用域中,必须处于模块的顶层。
export:(输出)
export的写法分别有以下几种:
1, export let a = 1 2, let a = 1; export {a} 3, let a = 1; export {a as n}
同样的,导出function和class都要遵守上面的写法
export导出的是值的引用,所以可以获取模块内部的实时值。
import:(输入)
1, import {getName, getAge} from './common' 2, import {getName as gName, getAge as gAge} from './common' 3, import * as get from './common' ----> get.getName get.getAge
import具有提升效果,会提升到整个模块的头部首先执行。
export default:(默认输出)
因为使用import需要知道所要加载的变量名或者函数名,有没有方法可以在不了解模块有哪些属性和方法的情况下使用模块呢?
答案是有的,可以使用export default命令为模块指定默认的输出。
本质上,export default就是输出一个叫做default的变量或者方法,所以后面不能跟变量声明语句。
1, export default function getName () {} 2, function getName(){} export default getName
每个模块只有一个默认的输出,所以可以默认输出一个匿名函数。 在import使用的时候,可以不使用大括号。