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 等。