ECMAScript 6入門類繼承筆記

_DangJin 發(fā)布于2019-08-23 12:31 / 817人閱讀

類繼承

看類繼承前，先回顧構造函數(shù)怎么實現(xiàn)對象的繼承的

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

它實現(xiàn)了哪幾個功能：

繼承F的this屬性也就是F實例對象的屬性

Son.prototype.__proto__ === F.prototype 實現(xiàn)了上下輩分的繼承

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

同樣實現(xiàn)了那三點基本功能

B?{a: 1, b: 2}
b.__proto__  == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B

我認為：關鍵字extends實現(xiàn)了原型的繼承，以及constructor的修正；關鍵字super實現(xiàn)了父類this的繼承，這里的super相當于A.prototype.constructor.call(this)

注意點

寫了constructor，就必須在里面寫super，不然new子類實例對象會報錯；要么都不寫；其次子類的中constructor中的this屬性必須寫在super后面

1.ES5 的繼承，實質(zhì)是先創(chuàng)造子類的實例對象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機制完全不同，實質(zhì)是先將父類實例對象的屬性和方法，加到this上面（所以必須先調(diào)用super方法），然后再用子類的構造函數(shù)修改this
2.因為子類自己的this對象，必須先通過父類的構造函數(shù)完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進行加工，加上子類自己的實    例屬性和方法。如果不調(diào)用super方法，子類就得不到this對象。

        class B extends A {
            constructor() {    //要么都不寫，new時默認會自動生成
                super();
                this.b = 2;    //寫在super后面
            } 
            m() {

            }
        }

super的各種指向問題

super作為函數(shù)，只能放在子類的constructor中，指向A.prototype.constructor.call(this)

super作為對象，在子類普通方法中調(diào)用,super就是父類的原型也就是A.prototype；所以只能調(diào)用原型鏈上的方法，不能動用父類實例的方法和屬性constructor{}中的不能調(diào)用

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

并且規(guī)定

在子類普通方法中通過super調(diào)用父類的方法時，方法內(nèi)部的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作為對象，在靜態(tài)方法中指向的是父類能調(diào)用父類的靜態(tài)方法，如果方法內(nèi)部有this則指向當前的子類
只有類才能調(diào)用類的靜態(tài)方法

        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__屬性，表示構造函數(shù)的繼承，總是指向父類。
（2）子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。

類的繼承模式

class A {
}

class B {
}

// B 的實例繼承 A 的實例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 繼承 A 的靜態(tài)屬性
Object.setPrototypeOf(B, A);

const b = new B();

也是因為這種實現(xiàn)所以類能調(diào)用自己的靜態(tài)方法

es6實現(xiàn)了原始構造函數(shù)的繼承

之前Array.apply(this)this并不會塑造Array里面的內(nèi)部結構，所以我們當我們用類數(shù)組對象引用數(shù)組方法時用null代替了
而es6用類實現(xiàn)它的繼承，
代碼摘自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構造函數(shù)的行為，一旦發(fā)現(xiàn)Object方法不是通過new Object()這種形式調(diào)用，ES6 規(guī)定Object構造函數(shù)會忽略參數(shù)。

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr === true  // false

傳入?yún)?shù)會無效的

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98679.html

ECMAScript 6入門類學習筆記上

摘要：類基本概念，記錄以便自己后面加深理解了解類是什么是什么不妨寫一個看看的原型可以看到這三個屬性都是不可遍歷的并且與類相比就多了一個原型鏈。和靜態(tài)方法中是一樣的得是哪個類就返回哪個類本類不能實例化報錯正確類class 基本概念，記錄以便自己后面加深理解了解類是什么 class是什么？不妨寫一個看看 class Demo { constructor() { thi...

asoren 2019-08-23 12:31 評論0 收藏0
ECMAScript 6入門讀書筆記二

摘要：變量的解構賦值更加便利的從匿名對象或者數(shù)組中，對變量進行賦值數(shù)組的解構賦值基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。變量的解構賦值更加便利的從匿名對象或者數(shù)組中，對變量進行賦值；數(shù)組的解構賦值基本樣式，右邊數(shù)據(jù)類型必須是可迭代的類型。 let a = 1, b = 2, c = 3; //等價于 //let [a, b, c] = [1, 2, 3]; 對...

wawor4827 2019-08-23 12:27 評論0 收藏0
ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門）

摘要：也就是說，遍歷器對象本質(zhì)上，就是一個指針對象。執(zhí)行這個函數(shù)，就會返回一個遍歷器。一個對象如果要有可被循環(huán)調(diào)用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。后面跟的是一個可遍歷的結構，它會調(diào)用該結構的遍歷器接口。 ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門） Iterator的遍歷過程創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結構的起始位...

mayaohua 2019-08-20 18:19 評論0 收藏0
ECMAScript 6入門擴展筆記

摘要：字符串擴展相關補充引入來表示碼點，之前只能表示引入能正確讀取大于的編碼引入用于讀取大于的字符的編碼例如字符串擴展 Unicode相關補充引入u{xx}來表示碼點，之前只能表示u0000-uffff引入String.fromCodePoint()能正確讀取大于uFFFF的unicode編碼引入s.codePiointAt()用于讀取大于0xFFFF的字符的unicode編碼例如let...

孫淑建 2019-08-23 12:40 評論0 收藏0
《ECMAScript 6 入門》讀書筆記

摘要：阮一峰老師開源作品。書上的示例代碼可以通過在線網(wǎng)站代碼調(diào)試工具調(diào)試。阮一峰老師開源作品。書上的示例代碼可以通過在線網(wǎng)站代碼調(diào)試工具 JS Bin 調(diào)試。作用域作用域鏈每個變量或函數(shù)通過執(zhí)行環(huán)境 (execution context) 定義了其有權訪問的其他數(shù)據(jù)，決定了他們各自的行為；全局執(zhí)行環(huán)境是最頂層的執(zhí)行環(huán)境，根據(jù)宿主環(huán)境的不同，表示全局執(zhí)行環(huán)境的對象也不同：在瀏覽...

qieangel2013 2019-08-20 15:21 評論0 收藏0