Klassenvererbungsanalyse in ECMAScript 6 (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Klassenvererbungsanalyse in ECMAScript 6 (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist.

Klassenvererbung

Bevor Sie sich die Klassenvererbung ansehen, überprüfen Sie zunächst, wie der Konstruktor die Objektvererbung implementiert

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

Was implementiert er? Funktion :

Erben Sie das Attribut this von F, das das Attribut des F-Instanzobjekts ist

Son.prototype.__proto__ === F.prototype realisiert die Vererbung des Dienstalters

son.constructor ermöglicht es dem Sohn, seine Vorfahren zu erkennen

Das Gleiche gilt für die Klassenvererbung

Verwenden Sie die Schlüsselwörter „extens“ und „super“, um eine einfache Vererbung anzuzeigen

        class A {
            constructor() {
                this.a = 1;
            }
        }
        class B extends A {
            constructor() {
                super();
                this.b = 2;
            }
            m() {

            }
        }
        let b = new B();

erreicht dies ebenfalls Drei Grundfunktionen

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

Ich denke: Das Schlüsselwort „extens“ realisiert die Vererbung des Prototyps und die Änderung des Konstruktors; das Schlüsselwort „super“ realisiert die Vererbung der übergeordneten Klasse „this“, und „super“ entspricht hier A. prototyp.constructor.call(this)

Hinweis

Wenn Sie einen Konstruktor schreiben, müssen Sie super darin schreiben, andernfalls meldet das neue Unterklasseninstanzobjekt einen Fehler alle; zweitens muss im Konstruktor der Unterklasse das Attribut this nach super

1 geschrieben werden. Das Wesentliche besteht darin, zuerst das Instanzobjekt this der Unterklasse zu erstellen und dann die Methode hinzuzufügen übergeordnete Klasse zu this (Parent.apply(this)) . ES6 Der Vererbungsmechanismus Ihres eigenen Objekts muss zunächst durch den Konstruktor der übergeordneten Klasse geformt werden, um dieselben Instanzattribute und -methoden wie die übergeordnete Klasse zu erhalten, und dann verarbeitet werden und die eigenen Instanzattribute und -methoden der Unterklasse hinzufügen. Wenn die Supermethode nicht aufgerufen wird, erhält die Unterklasse dieses Objekt nicht.

        class B extends A {
            constructor() {    //要么都不写，new时默认会自动生成
                super();
                this.b = 2;    //写在super后面
            } 
            m() {

            }
        }

Verschiedene Zeigeprobleme von super

super als Funktion können nur im Konstruktor einer Unterklasse platziert werden, die auf

A.prototype.constructor.call(this)

super als Objekt zeigt die Unterklasse Beim Aufruf in einer normalen Methode ist super der Prototyp der übergeordneten Klasse, die

ist. Daher können nur Methoden in der Prototypenkette aufgerufen werden und die Methoden und Attribute der übergeordneten Klasseninstanz können nicht verwendet werden. A.prototype

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

constructor{} kann nicht aufgerufen werden Und es ist festgelegt, dass

Wenn die Methode der übergeordneten Klasse in der normalen Methode der Unterklasse über super aufgerufen wird, zeigt dies innerhalb der Methode auf die aktuelle Unterklasseninstanz.

Die oben genannte Rückgabe bedeutet also, das Instanzobjekt der Unterklasse zurückzugeben

Wenn super als Objekt zum Zuweisen von Attributen zu Attributen verwendet wird

super entspricht diesem und die zugewiesenen Attribute werden zu Attributen der Unterklasseninstanz

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 als Objekt, in der statischen Methode zeigt es auf die übergeordnete Klasse, die die statische Methode der übergeordneten Klasse aufrufen kann aktuelle Unterklasse

Nur ​​die Klasse kann die statische Methode der Klasse aufrufen

        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

Da Objekte immer andere Objekte erben, können Sie das Schlüsselwort super in jedem Objekt verwenden. Der Prototyp und __proto__ der

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

-Klasse (1) Das __proto__-Attribut der Unterklasse stellt die Vererbung des Konstruktors dar und zeigt immer auf die übergeordnete Klasse.

(2) Das __proto__-Attribut des Prototypattributs der Unterklasse stellt die Vererbung der Methode dar und zeigt immer auf das Prototypattribut der übergeordneten Klasse.

Der Vererbungsmodus der Klasse

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

Aufgrund dieser Implementierung kann die Klasse auch ihre eigene statische Methode aufrufen

es6 implementiert die Vererbung des ursprünglichen Konstruktors

Zuvor hat Array.apply(this)this die interne Struktur von Array nicht geformt. Wenn wir also Array-ähnliche Objekte zum Referenzieren von Array-Methoden verwendeten, verwendeten wir null anstelle von

und es6 verwendete Klassen zur Implementierung seine Vererbung,
Codeauszug aus „Erste Schritte mit 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

Es ist zu beachten, dass

ES6 das Verhalten des Objektkonstruktors geändert hat, sobald festgestellt wurde, dass die Objektmethode vorhanden ist Wird nicht über new Object () aufgerufen, legt ES6 fest, dass der Objektkonstruktor die Parameter ignoriert.

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

Die übergebenen Parameter sind ungültig

Das obige ist der detaillierte Inhalt vonKlassenvererbungsanalyse in ECMAScript 6 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!