关于es6 import export的学习随笔 （1）

　　记得之前的一次面试中，有个面试官问了我关于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命令为模块指定默认的输出。

1,   export default function getName () {}

2,   function getName(){}      export default getName 

　　每个模块只有一个默认的输出，所以可以默认输出一个匿名函数。 在import使用的时候，可以不使用大括号。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有