从javascript到es6的自定义类和类的组织

Module部分是es6的进步，它极其友好的帮助组织前端架构。类定义的改善，使es6逐渐走向面向对象。

1、自定义类

es6对类的定义情况进行了大幅度的改善，以原型法为继承的核心，确定了继承的实际关系。

new.target是新增的，用在构造函数中可以确定构造函数是怎么调用的。存在明确继承关系的情况下，子类的构造函数必须显示的调用super()一次。

其余部分可以参考其他面向对象语言的类定义。

示例代码如下：

class Person{

constructor(){

if(new.target===undefined){

console.log("not by new");

}else if(new.target===Person){

console.log("created by Person");

}else {

console.log("created by child class");

}

}

}



class Child extends Person{

constructor(){

super();

}

}



let person=new Person();

let child=new Child();

2、Module

这是es6中新增的内容。如果说AMD、commonJS是通过动态调整文件加载量的话，Module的机制就是想办法将文件中的内容做静态化处理。Module中常用的两个命令是import和export 。export是用来规定Module对外提供的静态化内容。import则是用来规定Module从其他Module获取的静态输入。

export和import的内容可以是动态化的参数、数组、函数、类、对象等。

export Person from './Person';

import Child from './Person';

通常Module的导入和导出还跟页面es文件加载有关，如下：

<script type="module" src="./Person.js" async ></script>

<script type="module" src="./Person.js" defer ></script>



<script type="module">

import Person from './Person.js';



</script>

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

<script>标签的async属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。多个带有async的文件不会按照页面出现顺序执行，是模块加载完就开始执行。