js-Lernnotizen: Schlüsselwörter „class“, „super“ und „extended“

Vorwort

Die JavaScript-Sprache hat das Schlüsselwort class in ES6 eingeführt. Während des Studieninterviews werden Sie vom Interviewer häufig gebeten, über Ihr Verständnis von class in ES6 zu sprechen, sowie darüber, wie dieses Schlüsselwort in unserem Code verwendet wird und worauf bei der Verwendung dieses Schlüsselworts zu achten ist. Dieser Artikel fasst die relevanten Wissenspunkte zusammen.

Text

1. Erstellen Sie Objekte vor es6

Sehen wir uns zunächst die Tatsache an, dass wir vor es6, wenn wir ein Objekt erstellen wollten, dies nur über die Konstruktorfunktion tun konnten, indem wir dem Prototyp die statische Methode hinzufügten, sodass jede Instanz die Methode aufrufen konnte.

Funktion Person(Name, Alter) {
            dieser.name = Name
            this.age = Alter
            Person.prototype.sayHello = Funktion () {
                returniere "hallo," + dieser.name + ",guten Morgen"
            }
        }
        let person = neue Person("Serendipity", 18)
        console.log(person.sayHello())//hallo, serendipity, guten Morgenconsole.log(person instanceof Person);//true
        console.log(Person Instanz von Objekt);//true

2. Klassendeklaration nach es6

Klassen sind Vorlagen zum Erstellen von Objekten; sie kapseln Daten mit Code zur Bearbeitung dieser Daten. Klassen in js basieren auf Prototypen, haben aber auch einige Syntax und Semantik gemeinsam, die den ES5-Klassen ähneln.

Tatsächlich ist eine Klasse eine spezielle Art von Funktion. Genau wie das Definieren von Funktionsdeklarationen und Funktionsausdrücken besteht auch die Klassensyntax aus zwei Teilen: Klassendeklaration und Klassenausdruck.

Klasse Person {
            Konstruktor (Name, Alter) { // Eigene Eigenschaft, diese Eigenschaft erscheint auf der Instanz und kann nur im Klassenkonstruktor oder in der Methode this.name = name erstellt werden
                this.age = Alter
            }
            sayHello() {//Entspricht Perosn.prototype.sayHello
                returniere `hallo,${this.name},Guten Morgen`
            }
        }
        let person = neue Person("Serendipity", 18)
        console.log(person.sayHello()); //hallo, glücklicher Zufall, guten Morgen console.log(person instanceof Person); //true
        console.log(Person Instanz von Objekt);//true
        console.log(Typ der Person);//Funktion
        console.log(Typ von Person.prototype.sayHello);//Funktion

Die Klassendeklaration ermöglicht Ihnen, einen Konstruktor mithilfe der Konstruktormethode in der Klasse zu definieren, ohne eine spezielle Konstruktionsmethode zur Verwendung als Konstruktor definieren zu müssen.

Die Syntax einer Klasse ähnelt der einer normalen Funktion vor ES5, es gibt jedoch einige Besonderheiten zu beachten:

(1) Klassendeklarationen werden nicht angehoben. Das Verhalten von Klassendeklarationen ähnelt dem von let, sodass während der Ausführung eine vorübergehende tote Zone in der Klasse entsteht.

(2) Der gesamte Code in der Klasse wird automatisch im strengen Modus ausgeführt und der strenge Modus kann nicht beendet werden

(3) Alle Methoden einer Klasse sind nicht aufzählbar. Gewöhnliche benutzerdefinierte Methoden können nur über object.defineProperty() als nicht aufzählbar definiert werden.

(4) Keine der Methoden in der Klasse enthält ein [[Konstrukt]], daher wird beim Aufruf mit new ein Fehler ausgegeben.

(5) Der Aufruf eines Klassenkonstruktors ohne Verwendung von new führt zu einem Fehler

(6) Der Versuch, den Klassennamen innerhalb einer Klassenmethode zu überschreiben, führt zu einem Fehler

Konvertieren Sie den obigen Code wie folgt in ES5:

lass PersonClass = (Funktion () {
            "streng verwenden"
            const PersonClass = Funktion (Name, Alter) {
                // Bestimmen Sie, ob der Konstruktor von new aufgerufen wird, if (typeof new.target === "undefined") {
                    throw new Error("Konstruktor muss mit new aufgerufen werden.")
                }
                dieser.name = Name
                this.age = Alter
            }
            Objekt.defineProperty(PersonClass.prototype, "sayHello", {
                Wert: Funktion () {
                    if (typeof new.target !== "undefined") { // Sicherstellen, dass beim Aufrufen nicht new verwendet wird
                        throw new Error("Methode kann nicht mit new aufgerufen werden.")
                    }
                    returniere "hallo," + this.name + ",Guten Morgen!"
                },
                aufzählbar: falsch,
                konfigurierbar: true,
                beschreibbar: true
            })
            Personenklasse zurückgeben
        })()
        var personClass = neue PersonClass("Serendipity", 18)
        Konsole.log (Personenklasse.Name);//Serendipität
        console.log(personClass.sayHello()); ///hallo, Serendipity, guten Morgen!

Zwei PersonClass-Deklarationen, eine Let-Deklaration im äußeren Gültigkeitsbereich und eine weitere Const-Deklaration innerhalb der unmittelbar ausgeführten Funktion, sind der Grund dafür, dass Klassenmethoden den Klassennamen nicht überschreiben können, während Code außerhalb der Klasse zulässig ist. Gleichzeitig wird nur der Klassenname innerhalb der Klasse als als const deklariert betrachtet. Dies bedeutet, dass Sie den Klassennamen extern umschreiben können (entspricht „let“), dies jedoch nicht innerhalb der Klassenmethode tun können.

3. Klassenvererbung

Die Vererbungsmethode vor ES6 implementierte die Vererbung hauptsächlich durch eine Kombination aus Konstruktoren und Prototypketten. Der spezifische Code lautet wie folgt:

Funktion Rechteck(Länge, Breite) {
            this.length = Länge
            this.width = Breite
            Rechteck.prototype.getArea = Funktion () {
                returniere diese.Länge * diese.Breite
            }
        }
        Funktion Quadrat(Länge) {
            Rechteck.call(dies, Länge, Länge)
        }
        Quadrat.Prototyp = Objekt.erstellen(Rechteck.Prototyp, {
            Konstruktor: {
                Wert: Quadrat,
                aufzählbar: wahr,
                beschreibbar: wahr,
                konfigurierbar: true
            }
        })
        var Quadrat = neues Quadrat(3)
        konsole.log(quadrat.getArea()); //9
        console.log(square-Instanz von Square); //true
        console.log(quadratische Instanz von Rectangle); //true

Der obige Code implementiert die übergeordnete Klasse Rectangle, indem dem Konstruktor und dem Prototyp statische Methoden hinzugefügt werden. Anschließend ruft die Unterklasse Square den Konstruktor der übergeordneten Klasse über Rectangle.call(this, length, length) auf. Object.create erstellt intern ein leeres Objekt, um die beiden Prototypobjekte zu verbinden, und richtet den Konstruktor dann manuell auf sich selbst. Diese Methode zur Implementierung von Vererbungscode ist kompliziert und schwer zu verstehen. Daher vereinfacht die Erstellung einer ES6-Klasse die Vererbung. Verwenden Sie das Schlüsselwort extends, um die übergeordnete Klasse anzugeben, die die aktuelle Klasse erben muss. Der Prototyp der generierten Klasse wird automatisch angepasst. Außerdem können Sie mit der Methode super() auf den Konstruktor der Basisklasse zugreifen. Der spezifische Code lautet wie folgt:

Klasse Rechteck {
            Konstruktor(Länge, Breite) {
                this.length = Länge
                this.width = Breite
            }
            getArea() {
                returniere diese.Länge * diese.Breite
            }
        }
        Klasse Quadrat erweitert Rechteck {
            Konstruktor(Länge) {
                super(Länge, Länge)
            }
            getArea() {
                gib diese.Länge + diese.Länge zurück
            }

        }
        var Quadrat = neues Quadrat(3)
        konsole.log(quadrat.getArea()); //6
        console.log(square-Instanz von Square); //wahr
        console.log(quadratische Instanz von Rectangle); //true

Im obigen Code überschreibt die Square-Klasse die getArea()-Methode der Basisklasse. Wenn der Funktionsname in der abgeleiteten Unterklasse mit dem Funktionsnamen in der Basisklasse identisch ist, maskiert die Methode der abgeleiteten Klasse die Methode der Basisklasse. Gleichzeitig kann die Methode der Basisklasse auch in der Unterklasse getArea () { return super.getArea() } aufgerufen werden, um sie zu erweitern.

4. Erben statischer Mitglieder der Klasse

Statische Mitglieder: zusätzliche Methoden, die direkt zum Konstruktor hinzugefügt werden. Beispielsweise sind in ES5 zu Prototypen hinzugefügte Methoden statische Mitglieder. Die Einführung der ES6-Klasse vereinfacht die Erstellung statischer Mitglieder. Sie müssen lediglich das Schlüsselwort static vor den Namen der Methoden und Accessor-Eigenschaften hinzufügen. Beispielsweise wird der folgende Code verwendet, um zwischen statischen Methoden und Instanzmethoden zu unterscheiden.

Funktion Personentyp(Name) {
        dieser.name = Name;
    }
    // statische Methode PersonType.create = Funktion(Name) {
        gib einen neuen Personentyp (Name) zurück;
    };
    // Instanzmethode PersonType.prototype.sayName = function() {
        konsole.log(dieser.name);
    }; var person = Personentyp.create("Nicholas");

So verwenden Sie statische Mitglieder in ES6:

Klasse Rechteck {
            Konstruktor(Länge,Breite) {
                this.length = Länge
                this.width = Breite
            }
            getArea() {
                gib diese.Länge * diese.Breite zurück
            }
            statisch erstellen(Länge,Breite) {
                gibt neues Rechteck zurück (Länge, Breite)
            }
        }
        Klasse Quadrat erweitert Rechteck {
            Konstruktor (Länge){
                super(Länge,Länge)
            }
        }
        var Quadrat = Quadrat.erstellen(3,4)
        konsole.log(quadrat.getArea()); //12
        console.log(square-Instanz von Square); //false
        console.log(quadratische Instanz von Rectangle); //true

Im obigen Code wird der Klasse Rectangle eine neue statische Methode create() hinzugefügt, die durch Vererbung als Square.create() existiert und sich genauso verhält wie Rectangle.create(). Beachten Sie, dass auf statische Mitglieder nicht über Instanzen zugegriffen werden kann und Sie für den Zugriff darauf immer direkt die Klasse selbst aufrufen müssen.

Abschließende Gedanken

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass er den Lesern etwas Hilfe und Fortschritt bringt. Wenn es Ihnen passt, folgen Sie mir bitte. Xiaobais Wachstumspfad wird weiterhin einige häufige Probleme und technische Punkte bei der Arbeit aktualisieren.