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中類繼承解析的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！