es6常见知识点
官方文档：[https://es6.ruanyifeng.com/](https://es6.ruanyifeng.com/)
一、Class
1、Class
Class只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待定义:
constructor代表构造方法,而this指向new 生成的实例
定义类方法时,可以不使用function
注意:类的内部所有定义的方法，都是不可枚举的（non-enumerable）。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
使用
new Point(x,y)
2、constructor
类的默认方法,new生成对象实例的时候执行的就是这个方法一个类必须有constructor方法
constructor默认返回实例对象
3、Class不存在变量提升
```plain new Foo(); // ReferenceError class Foo {} ```4、Class的继承
extends关键字class ColorPoint extends Point {}
注意:
1.子类必须调用super,子类本身没有this,super是父类的构造函数,调用super,子类才有this
这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
5、类的prototype属性和__proto__属性
1.子类的__proto__指向父类2.子类的prototype的__proto__指向父类的.prototype
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
super关键字
1.调用super方法时,super代表父类的constructor方法
2.作为属性super调用时,super代表父类本身
ES6改变了Object构造函数的行为，一旦发现Object方法不是通过new Object()这种形式调用，ES6规定Object构造函数会忽略参数。
6、getter和setter
7、Generate方法
直接在方法属性前加*8、静态方法static
一个方法前加static,则该方法不会被继承,而是通过类来直接调用父类的静态方法，可以被子类继承。
静态方法也可以从super上调用,因为super指向父类本身
注意:Class内部只有静态方法，没有静态属性。
9、new.target
（在构造函数中）返回new命令作用于的那个构造函数。二、Module
1、严格模式
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上`"use strict";` 。严格模式主要有以下限制。
- 变量必须声明后再使用
- 禁止
this指向全局对象 - 不能使用
fn.caller和fn.arguments获取函数调用的堆栈 - 增加了保留字（比如
protected、static和interface）
其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
2、export命令
模块功能主要由两个命令构成：`export` 和`import` 。`export` 命令用于规定模块的对外接口，`import` 命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。
export的写法，除了像上面这样，还有另外一种。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。
export命令除了输出变量，还可以输出函数或类（class）。
export function multiply(x, y) {
return x * y;
};
上面代码对外输出一个函数multiply。
通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。
3、import命令
使用`export`命令定义了模块的对外接口以后，其他 JS 文件就可以通过`import`命令加载这个模块。// main.js
import { firstName, lastName, year } from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。
import {a} from './xxx.js'
a.foo = 'hello'; // 合法操作
上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
import { myMethod } from 'util';
上面代码中，util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module';
上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载
3、模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（`*`）指定一个对象，所有输出值都加载在这个对象上面。下面是一个circle.js文件，它输出两个方法area和circumference。
// 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('圆周长：' + circumference(14));
上面写法是逐一指定要加载的方法，整体加载的写法如下。
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
4、export default命令
从前面的例子可以看出，使用`import`命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}
上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
5、export、import、export default几种指令的用法总结
一，import（模块、文件）引入方式
1 引入第三方插件
```plain import echarts from 'echarts' ```2.导入 css文件
```plain import 'iview/dist/styles/iview.css'; ```如果是在.vue文件中那么在外面套个style
1.
3.导入组件
```plain 1. import name1 from './name1' 2. import name2 from './name2' 3. components:{ 4. name1, 5. name2, 6. }, ```4．import '@…'的语句
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径5.引入工具类
```plain 1. 第一种是引入单个方法 2. 3. import {axiosfetch} from './util'; 4. 5. 下面是写法，需要export导出 6. export function axiosfetch(options) { 7. 8. } ```1. 第二种 导入成组的方法
2.
3. import * as tools from './libs/tools'
4.
5. 其中tools.js中有多个export方法,把tools里所有export的方法导入
6.
7. vue中怎么用呢？
8. Vue.prototype.$tools = tools
9. 直接用 this.$tools.method调用就可以了
说到这 export 和 export default 又有什么区别呢？
下面看下区别
1. 先是 export
2. import {axiosfetch} from './util'; //需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号
3. 如果是两个方法
4. import {axiosfetch,post} from './util';
5. 再是 export default
6. import axiosfetch from './util'; //不需要加花括号 只能一个一个导入
二，export,import和export default的关系
export 与import是es6中新增模块功能最主要的两个命令。1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要{ }
一、import引入文件路径
` import` 引入一个依赖包，不需要相对路径。如：**import app from ‘app’**;import 引入一个自己写的js文件，是需要相对路径的。如：import app from ‘./app.js’;
二、import引入文件变量名
1 、使用` export` 抛出的变量需要用{}进行` import`1. //a.js
2. export const str = "blablabla~";
3. export function log(sth) {
4. return sth;
5. }
6.
7. 对应的导入方式：
8.
9. //b.js
10. import { str, log as _log } from 'a'; //也可以分开写两次，导入的时候带花括号。还可以用as重命名
2、使用export default抛出的变量，只需要自己起一个名字就行：
1. //a.js :
2. var obj = { name: ‘example’ };
3. export default obj;
4.
5. //b.js:
6. import newNname from ‘./a.js’; //newNname 是自己随便取的名字，这里可以随便命名
7. console.log(newNname .name); // example;
总结
其中export和export default最大的区别就是export不限变量数 可以一直写，而export default 只输出一次 而且 export出的变量想要使用必须使用{}来盛放，而export default 不需要 只要import任意一个名字来接收对象即可。
三，部分导入和部分导出，全部导入和全部导出
一、部分导出和部分导入
部分导出和部分导入的优势，当资源比较大时建使用部分导出，这样一来使用者可以使用部分导入来减少资源体积，比如element-ui官方的就推荐使用部分导入来减少项目体积，因为element-ui是一个十分庞大的框架，如果我们只用到其中的一部分组件， 那么只将用到的组件导入就可以了。1. //部分导出
2. //A.js
3. export function helloWorld(){
4. conselo.log("Hello World");
5. }
6. export function test(){
7. conselo.log("this's test function");
8. }
9.
10. //部分导入
11. //B.js
12. import {helloWorld} from "./A.js" //只导入A.js中的helloWorld方法
13. helloWorld(); //执行utils.js中的helloWorld方法
如果我们需要A.js中的全部资源,则可以全部导入，如下：
1. import * as _A from "./A.js" //导入全部的资源，_A为别名，在调用时使用
2. _A.helloWorld(); //执行A.js中的helloWorld方法
3. _A.test(); //执行A.js中的test方法
二、全部导出和全部导入
如果使用全部导出，那么使用者在导入时则必须全部导入，推荐在写方法库时使用部分导出，从而将全部导入或者部分导入的权力留给使用者。需要注意的是:一个js文件中可以有多个export，但只能有一个export default
1. //全部导出 A.js
2. var helloWorld=function(){
3. conselo.log("Hello World");
4. }
5. var test=function(){
6. conselo.log("this's test function");
7. }
8. export default{
9. helloWorld,
10. test
11. }
12.
13. //全部导入 B.js
14. import A from "./A.js"
15. A.helloWorld();
16. A.test();
6、Module 的加载实现
浏览器加载
传统方法
HTML 网页中，浏览器通过`
默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到
上面代码中，
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。
浏览器对于带有type="module"的
如果网页有多个
一旦使用了async属性，