這篇文章帶給大家的內容是關於ECMAScript 6中類繼承解析（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
類別繼承
看類別繼承前，先回顧建構子怎麼實作物件的繼承的
function F() {
this.a = 1;
}
function Son() {
F.call(this);
}
function inherit(S, F) {
S.prototype = Object.create(F.prototype);
S.prototype.constructor = S;
}
inherit(Son, F);
let son = new Son();它實作了哪幾功能：
繼承F的this屬性也就是F實例物件的屬性
Son.prototype.__proto__ === F.prototype 實作了上下輩分的繼承
# son.constructor讓son認祖歸宗
用來extends和super關鍵字，看一個簡單的繼承
class A {
constructor() {
this.a = 1;
}
}
class B extends A {
constructor() {
super();
this.b = 2;
}
m() {
}
}
let b = new B();同樣實現了那三點基本功能
B {a: 1, b: 2}
b.__proto__ == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B我認為：關鍵字extends實現了原型的繼承，以及constructor的修正；關鍵字super實現了父類this的繼承，這裡的super相當於A.prototype.constructor. call(this)
寫了constructor，就必須在裡面寫super，不然new子類別實例物件會報錯；要嘛都不寫；其次子類別的中constructor中的this屬性必須寫在super後面
1.ES5 的繼承，實質是先創造子類別的實例物件this，然後再將父類別的方法加入this上面（Parent.apply(this)） 。 ES6
的繼承機製完全不同，實質是先將父類別實例物件的屬性和方法，加到this上面（所以必須先呼叫super方法），然後再用子類別的建構子修改this
2.因為子類自己的this對象，必須先透過父類別的建構函數完成塑造，得到與父類別相同的實例屬性和方法，然後再加工，加上子類別自己的實 例屬性和方法。如果不呼叫super方法，子類別就得不到this物件。
class B extends A {
constructor() { //要么都不写，new时默认会自动生成
super();
this.b = 2; //写在super后面
}
m() {
}
}super作為函數，只能放在子類別的constructor中，指向A.prototype.constructor.call(this)
super作為對象，在子類別普通方法中呼叫,super就是父類別的原型也就是A.prototype；所以只能呼叫原型鏈上的方法，不能動用父類實例的方法和屬性constructor{}中的不能呼叫
class A {
constructor() {
this.a = 1;
}
n() {
return this;
}
}
class B extends A {
constructor() {
super();
this.b = 2;
}
m() {
return super.n();
}
}
let b = new B();
b === b.m();並且規定
在子類別普通方法中透過super呼叫父類別的方法時，方法內部的this指向當前的子類別實例。
所以上面return this 就是回傳子類別實例物件
super作為物件對屬性賦值時
super相當於this，賦值屬性也就成了子類別實例的屬性
class A {
constructor() {
this.x = 1;
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3;
console.log(super.x); // undefined
console.log(this.x); // 3
console.log(super.valueOf() instanceof B); //true
}
}
let b = new B();super作為對象，在靜態方法中指向的是父類別能呼叫父類別的靜態方法，如果方法內部有this則指向目前的子類別
只有類別才能呼叫類別的靜態方法
class A {
constructor() {
this.a = 1;
}
static n() {
return this;
}
}
class B extends A {
constructor() {
super();
this.b = 2;
}
static m() {
return super.n();
}
}
console.log(A.n() === A) // true
console.log(B === B.m()); //truevar obj = {
toString() {
return "MyObject: " + super.toString();
}
};
Object.getPrototypeOf(obj).toString = function () {
return "这里super等于obj.__proto__";
}
console.log(obj.toString()); //MyObject: 这里super等于obj.__proto__（2）子類別prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類別的prototype屬性。
類別的繼承模式
class A {
}
class B {
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
const b = new B();也是因為這個實作所以類別能呼叫自己的靜態方法
之前Array.apply(this)this並不會塑造Array裡面的內部結構，所以我們當我們用類別數組物件引用數組方法時用null代替了
而es6用類別實現它的繼承，
程式碼摘自es6入門
class MyArray extends Array {
constructor(...args) {
super(...args);
}
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined需要注意的是
ES6 改變了Object構造函數的行為，一旦發現Object方法不是透過new Object()這種形式調用，ES6 規定Object構造函數會忽略參數。
class NewObj extends Object{
constructor(){
super(...arguments);
}
}
var o = new NewObj({attr: true});
o.attr === true // false傳入參數會無效的
以上是ECMAScript 6中類別繼承解析（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
