ES6的继承依然是基于原型的继承，但语法更为简洁清晰。通过一个extends关键字，就能描述两个类之间的继承关系（如下代码所示），在此关键字之前的Man是子类(即派生类)，而在其之后的People是父类（即基类或超类）。 ~~~ class People { constructor() { this.age = 28; } getAge() { return this.age; } static getName() { return "strick"; } } class Man extends People { constructor() { super(); } } var man = new Man(); Man.getName(); //"strick" man.getAge(); //28 ~~~   由上面的代码可知，子类能继承父类的静态方法和原型方法，而诸如访问器属性、生成器等父类的其它成员也是能继承的。不仅如此，extends关键字右侧继承的不单单是类，还可以是函数、内置对象，甚至是表达式，只要其计算结果合法就行。而合法与否的衡量准则，就是ES6对父类的要求，必须是含构造函数的对象，即能与new运算符组合的对象，像空的对象字面量（{}）、null、undefined和生成器等都是不允许的。   在Man类的构造函数中调用了一次super()方法，这是为了能更方便的操作父类而引入的新特性。而super是个特殊的关键字，在类中拥有双重身份，既是方法也是对象，关于对象身份的用法在[第5篇](https://www.cnblogs.com/strick/p/10173583.html)中曾有过介绍。 ## 一、super   当super作为方法使用时，有以下六个注意点。   （1）super()方法相当于父类的构造函数。   （2）只有在子类的构造函数中才能调用super()方法。   （3）如果子类显式地定义了构造函数，那么必须调用super()方法，否则会报错。   （4）如果子类没有定义构造函数，那么会自动调用super()方法。   （5）当子类的构造函数显式地返回一个对象时，就能避免调用super()方法。   （6）在使用this之前，必须先调用super()方法。 **1）第五个注意点**   下面用一个示例来描述第五个注意点，限于篇幅省略了父类People的声明。在子类Man的构造函数中注释了super()方法，并将其返回结果改成了一个空对象，这段代码能够正确执行。 ~~~ class Man extends People { constructor() { //super(); return {}; } } ~~~ **2）第六个注意点**   关于第六个注意点，之所以要这么限制，主要和this的初始化有关。调用super()方法不仅能执行父类的构造函数，还能初始化父类的this。而ES6对两个类的this的初始化顺序做了规定，先父类，再子类，因此super()方法要在使用this之前调用。还有一点要注意，就是子类的this会合并父类的this的属性和方法，如下代码所示，在父类People中初始化的自有属性age，能在子类Man中访问。 ~~~ class People { constructor() { this.age = 28; } } class Man extends People { constructor() { super(); console.log(this.age); //28 } } var man = new Man(); ~~~ **3）对象身份**   当super作为对象使用时，在不同的位置，其指向将不同，具体分为两种情况，如下所列。   （1）如果在子类的原型方法中使用super，那么super指向父类的原型。   （2）如果在子类的静态方法中使用super，那么super指向父类。   下面是一个演示super指向的示例，父类People包含两对同名方法，一个是原型方法，另一个是静态方法；子类Man包含两个只读的访问器属性，其中name是静态的访问器属性。 ~~~ class People { getAge() { return 28; } static getAge() { return 30; } getName() { return "freedom"; } static getName() { return "strick"; } } class Man extends People { get age() { return super.getAge(); } static get name() { return super.getName(); } } var man = new Man(); man.age; //28 Man.name; //"strick" ~~~   由两个访问器属性的读取结果可知，super的指向符合所列的两种情况。注意，像下面这样使用super，会抛出语法错误，因为此处的super无法明确说明自己的身份到底是方法还是对象。 ~~~ class Man extends People { getName() { console.log(super); } } ~~~ ## 二、表达式   ES6允许extends关键字的右侧是一个表达式，这使得子类的继承更加灵活，能动态地选择父类，下面用一个示例演示表达式的妙用。 ~~~ function getPeople(gender) { return gender == 1 ? Man : Woman; } class Man { } class Woman { } class Person extends getPeople(1) { } var person = new Person(); person instanceof Man; 　//true person instanceof Woman; 　//false ~~~   在代码中先声明三个类，其中Man和Woman是父类，Person是子类，再调用能根据参数返回不同类的getPeople()函数，得到的返回值是Man类。通过instanceof运算符的计算结果可知，Person类继承的正是Man类。 **1）mixin**   类的这个特性还能解决无法多重继承的问题，如下所示。 ~~~ function mixin(...objects) { function middle() {} Object.assign(middle.prototype, ...objects); return middle; } var man = { getMan() { return "男"; } }; var woman = { getWoman() { return "女"; } }; class Person extends mixin(man, woman) { } var person = new Person(); person.getMan(); 　　//"男" person.getWoman(); 　　//"女" ~~~   在代码中先初始化两个对象：man和woman，然后调用mixin()函数，将两个对象的方法合并到内部函数middle()的原型上，最后让Person类继承middle()函数，这样就能调用两个对象中的方法了。   这种将多个对象或类合并成一个，间接实现多重继承的作法叫做类的模板，也叫抽象子类或mixin（混合）。 ## 三、内置对象   在ES5时代，像Array、Error等内置对象是不能被继承的，而ES6突破了这个限制，因为ES6的子类能通过this访问父类的内部属性和方法，这样就能继承内置对象的所有功能。以数组为例，模拟的子类无法自动更新length属性，而ES6的子类就不会有这个问题，如下所示。 ~~~ class List extends Array { } var list = new List(); list.length; //0 list.push("a"); list.length; //1 ~~~ ## 四、Symbol.species   在内置对象中，有些方法能返回自己的实例，例如数组的map()、slice()等。当子类继承了内置对象后，这类方法的返回值会被替换成子类的实例，具体如下所示。 ~~~ class List extends Array { } var list = new List(1, 2), segment = list.slice(0, 1); //List [1] segment instanceof List; //true ~~~   接下来简单分析一下这其中的缘由。在每个内置对象中，都有一个静态的只读访问器属性（类似于下面的代码），其名称是内置符号Symbol.species，返回值是this。 ~~~ class Array { static get [Symbol.species]() { return this; } } ~~~   当调用内置对象中的方法时，如果返回值是实例，那么就会先访问Symbol.species属性，确定要实例化哪个类。而根据ES6的规则可知，当子类调用父类的静态方法时，方法中的this指向的是子类，从而就能证明子类在调用内置对象的某些方法时，能得到自身的实例。   如果想要内置对象的这些方法仍然返回它们自身的实例，那么就需要在子类中也声明一个相同的只读访问器属性，并返回相应的内置对象，以此屏蔽父类中的同名属性。下面的代码和上一个示例类似，只是给子类增加了Symbol.species属性。 ~~~ class List extends Array { static get [Symbol.species]() { return Array; } } var list = new List(1, 2), segment = list.slice(0, 1); //[1] segment instanceof List; //false ~~~ ## 五、new.target   元属性new.target曾在[第14篇](https://www.cnblogs.com/strick/p/10290535.html)中做过讲解，本节会介绍元属性在父类中的行为，如下所示。 ~~~ class People { constructor() { new.target === People; //false new.target === Man; //true } } class Man extends People { } var man = new Man(); ~~~   在上面的代码中，Man是子类，People是父类，在父类的构造函数中对new.target做了两次比较，从两次的比较结果中可知，此时的new.target指向的是子类。 ***** > 原文出处： [博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html) [知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。