ECMAScript 6中類別繼承解析（附範例）

這篇文章帶給大家的內容是關於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的各種指向問題

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());  //true

由於物件總是繼承其他物件的，所以可以在任一個物件中，使用super關鍵字。

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};
Object.getPrototypeOf(obj).toString = function () {
    return "这里super等于obj.__proto__";
}
console.log(obj.toString());        //MyObject: 这里super等于obj.__proto__

類別的prototype與__proto__

（1）子類別的__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();

也是因為這個實作所以類別能呼叫自己的靜態方法

es6實作了原始建構子的繼承

之前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中文網其他相關文章！