Klasse in Front-End-JavaScript

1. Klasse

Eine Klasse ist eine Vorlage zum Erstellen von Objekten. Die Methode zum Generieren von Objektinstanzen in JavaScript erfolgt über Konstruktoren. Sie unterscheidet sich erheblich von der Schreibmethode gängiger objektorientierter Sprachen ( java , C# ) und ist wie folgt:

Funktion Punkt(x, y) {
  dies.x = x;
  dies.y = y;
}

Punkt.prototype.toString = Funktion () {
  gibt '(' + dies.x + ', ' + dies.y + ')' zurück;
};

var p = neuer Punkt(1, 1);

ES6 bietet eine Schreibmethode, die näher an Java Sprache liegt und das Konzept der Class（類） als Vorlage für Objekte einführt. Klassen können mit dem Schlüsselwort class definiert werden.

Wie folgt: constructor() ist die Konstruktionsmethode und dies stellt das Instanzobjekt dar:

Klasse Punkt {
  Konstruktor(x, y) {
    dies.x = x;
    dies.y = y;
  }

  zuString() {
    gibt '(' + dies.x + ', ' + dies.y + ')' zurück;
  }
}

Der Datentyp einer Klasse ist eine Funktion, die selbst ein Konstruktor ist, der auf eine Funktion zeigt:

// ES5 Funktionsdeklaration function Point() {
 //...
}

// ES6-Klassendeklaration class Point {
  //....
  Konstruktor() {
  }
}
Typ von Punkt // "Funktion"
Punkt === Punkt.prototype.constructor // wahr

Die in der Klasse definierten Methoden sind an Point.prototype angehängt, sodass die Klasse nur syntaktischen Zucker bereitstellt und das Wesentliche weiterhin der Aufruf der Prototypkette ist.

Klasse Punkt {
  Konstruktor(x, y) {
    dies.x = x;
    dies.y = y;
  }

  zuString() {
    gibt '(' + dies.x + ', ' + dies.y + ')' zurück;
  }
}

Punkt.Prototyp = {
  //....
  zuString()
}
var p = neuer Punkt(1, 1);
p.toString() // (1,1)

Eine weitere Möglichkeit zum Definieren einer Klasse besteht in einem Klassenausdruck.

// Unbenannte/anonyme Klasse let Point = class {
  Konstruktor(x, y) {
    dies.x = x;
    dies.y = y;
  }
};
Punkt.name // Punkt

Es gibt einen wichtigen Unterschied zwischen Funktionsdeklarationen und Klassendeklarationen. Funktionsdeklarationen werden hochgestellt, Klassendeklarationen jedoch nicht.

> let p = new Point(); // Es wird kein Fehler gemeldet, wenn hochgestuft wird> function Point() {}
> 
> let p = neuer Punkt(); // Fehler, Referenzfehler
> Klasse Punkt {}
>

1.1 Konstruktor()

constructor() ist die Standardmethode der Klasse und wird automatisch aufgerufen, wenn new ein Instanzobjekt generiert.

Eine Klasse muss constructor() Methode haben. Wenn sie nicht explizit definiert ist, fügt die Engine standardmäßig einen leeren constructor() hinzu.

constructor() gibt standardmäßig das Instanzobjekt (also this ) zurück.

Klasse Punkt {
}

// Klasse Point automatisch hinzufügen {
  Konstruktor() {}
}

1.2 Getter und Setter

Wie in ES5 können Sie get und set innerhalb einer Klasse verwenden, um eine Speicherfunktion und eine Abruffunktion für eine Eigenschaft festzulegen und das Speicher- und Zugriffsverhalten der Eigenschaft abzufangen.

Klasse Benutzer {
  Konstruktor(Name) {
    dieser.name = Name;
  }

  Name abrufen() {
    gib diesen Namen zurück;
  }

  setze Name(Wert) {
    dieser.name = Wert;
  }
}

1.3 diese

Innerhalb einer Klassenmethode bezieht sich this standardmäßig auf die Instanz der Klasse. Beim Aufrufen einer Methode mit dieser Funktion müssen Sie obj.method() verwenden, andernfalls wird ein Fehler gemeldet.

Klasse Benutzer {
  Konstruktor(Name) {
    dieser.name = Name;
  }
  Druckname(){
    console.log('Name ist ' + dieser.name)
  }
}
const Benutzer = neuer Benutzer('Jack')
user.printName() // Name ist Jack
const { printName } = Benutzer;
printName() // Fehler. Kann Eigenschaften von undefined nicht lesen (lies „Name“)

Wenn Sie es ohne Fehler separat aufrufen möchten, besteht eine Möglichkeit darin bind(this) im Konstruktor aufzurufen.

Klasse Benutzer {
  Konstruktor(Name) {
    dieser.name = Name;
    dies.printName = dies.printName.bind(dies);
  }
  Druckname(){
    console.log('Name ist ' + dieser.name)
  }
}
const Benutzer = neuer Benutzer('Jack')
const { printName } = Benutzer;
printName() // Name ist Jack

bind(this) erstellt eine neue Funktion und verwendet das übergebene this als Kontext für die Funktion, wenn diese aufgerufen wird.

Darüber hinaus können Sie Pfeilfunktionen verwenden, da diese innerhalb einer Pfeilfunktion immer auf das Objekt verweisen, in dem sie definiert sind.

Klasse Benutzer {
  Konstruktor(Name) {
    dieser.name = Name;
  }
  Druckname = () => {
    console.log('Name ist ' + dieser.name)
  }
}
const Benutzer = neuer Benutzer('Jack')
const { printName } = Benutzer;
printName() // Name ist Jack

1.4 Statische Eigenschaften

Statische Eigenschaften beziehen sich auf die Eigenschaften der Klasse selbst und nicht auf die Eigenschaften, die für das Instanzobjekt this definiert sind.

Klasse Benutzer {
}

Benutzer.prop = 1;
Benutzer.prop // 1

1.5 Statische Methoden

Sie können in einer Klasse statische Methoden definieren. Die Methode wird nicht an Objektinstanzen vererbt, sondern direkt durch die Klasse aufgerufen.

this wird in statischen Methoden verwendet, um auf die Klasse zu verweisen.

Klasse Utils {
  statische Druckinfo() {
     diese.info();
  }
  statische Info() {
     console.log('hallo');
  }
}
Utils.printInfo() // hallo

Was die Aufrufbereichsbeschränkungen von Methoden wie privat und öffentlich betrifft, bietet ES6 diese noch nicht an. Sie werden im Allgemeinen durch Konventionen übernommen. Wenn Sie beispielsweise vor der Methode einen Unterstrich _print() hinzufügen, wird eine private Methode angegeben.

2. Vererbung

In Java wird die Klassenvererbung durch extends implementiert. In ES6 können Klassen auch über extends vererbt werden.

Beim Vererben muss die Unterklasse die super in constructor Konstruktormethode aufrufen, sonst wird beim Erstellen einer neuen Instanz ein Fehler gemeldet.

Klasse Point3D erweitert Point {
  Konstruktor(x, y, z) {
    super(x, y); // Rufe den Konstruktor (x, y) der übergeordneten Klasse auf
    dies.z = z;
  }

  zuString() {
    return super.toString() + ' ' + this.z ; // Rufe toString() der übergeordneten Klasse auf
  }
}

Die statischen Methoden der übergeordneten Klasse werden auch an die untergeordnete Klasse vererbt.

Klasse Übergeordnet {
  statische Info() {
    console.log('Hallo Welt');
  }
}

Klasse Kind erweitert Elternteil {
}

Child.info() // hallo Welt

2.1 Super-Schlüsselwort

Die super muss einmal im Konstruktor der Unterklasse ausgeführt werden, der den Konstruktor der übergeordneten Klasse darstellt.

Klasse Elternteil {}

Klasse Kind erweitert Elternteil {
  Konstruktor() {
    super();
  }
}

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

Klasse Übergeordnet {
  Konstruktor() {
    dies.x = 1;
    dies.y = 10
  }
  printParent() {
    konsole.log(dies.y);
  }
  drucken() {
    konsole.log(dies.x);
  }
}

Klasse Kind erweitert Elternteil {
  Konstruktor() {
    super();
    dies.x = 2;
  }
  M() {
    super.print();
  }
}

sei c = neues Kind();
c.printParent() // 10
cm() // 2

2.2 _proto_ und Prototyp

Wenn Sie zum ersten Mal JavaScript lernen, können Sie leicht _proto_ und prototype verwechseln. Zunächst wissen wir, dass jedes JS Objekt einem Prototypobjekt entspricht und Eigenschaften und Methoden vom Prototypobjekt erbt.

• prototype ist eine Eigenschaft einiger integrierter Objekte und Funktionen. Es handelt sich um einen Zeiger auf ein Objekt. Der Zweck dieses Objekts besteht darin, die von allen Instanzen gemeinsam genutzten Eigenschaften und Methoden zu enthalten (wir nennen dieses Objekt ein Prototypobjekt).
• _proto_ Jedes Objekt hat diese Eigenschaft, die im Allgemeinen auf prototype Eigenschaft des entsprechenden Konstruktors verweist.

Im Folgenden sind einige integrierte Objekte mit Prototyp aufgeführt:

Schauen Sie sich gemäß der obigen Beschreibung den folgenden Code an

var obj = {} // entspricht var obj = new Object()

// obj.__proto__ zeigt auf den Prototyp des Objektkonstruktors
obj.__proto__ === Objekt.prototype // wahr 

// obj.toString ruft die von Object.prototype geerbte Methode auf obj.toString === obj.__proto__.toString // true

// Array-Variable arr = []
arr.__proto__ === Array.prototype // wahr

Bei function hat jede deklarierte function sowohl prototype als auch __proto__ Attribute. Das erstellte Objektattribut __proto__ zeigt auf den prototype und das __proto__ der Funktion zeigt auf prototype des integrierten Funktionsobjekts (Funktion).

Funktion Foo(){}
var f = neues Foo();
f.__proto__ === Foo.prototype // wahr
Foo.__proto__ === Funktion.prototyp // wahr

2.3 __proto__ in der Vererbung

Als syntaktische Vereinfachung für Konstruktorfunktionen verfügen Klassen außerdem über prototype und __proto__ Eigenschaften, sodass zwei Vererbungsketten gleichzeitig vorhanden sind.

• Die __proto__ Eigenschaft einer Unterklasse gibt die Vererbung des Konstruktors an und verweist immer auf die übergeordnete Klasse.
• Die __proto__ Eigenschaft der Prototype-Eigenschaft der Unterklasse gibt die Vererbung der Methode an und verweist immer auf prototype Eigenschaft der übergeordneten Klasse.
  

Klasse Übergeordnet {
}

Klasse Kind erweitert Elternteil {
}

Kind.__proto__ === Übergeordnetes Element // wahr
Child.prototype.__proto__ === Parent.prototype // wahr

2.4 __proto__ in geerbten Instanzen

Die __proto__ Eigenschaft der Unterklasseninstanz verweist auf prototype des Unterklassenkonstruktors.

Die __proto__ Eigenschaft der __proto__ Eigenschaft der Unterklasseninstanz verweist auf __proto__ Eigenschaft der übergeordneten Klasseninstanz. Mit anderen Worten: Der Prototyp des Prototyps der Unterklasse ist der Prototyp der übergeordneten Klasse.

Klasse Übergeordnet {
}

Klasse Kind erweitert Elternteil {
}

var p = neues übergeordnetes Element();
var c = neues Kind();

c.__proto__ === p.__proto__ // falsch
c.__proto__ === Child.prototype // wahr
c.__proto__.__proto__ === p.__proto__ // wahr

3. Zusammenfassung

Dies ist das Ende dieses Artikels über class in Front-End JavaScript . Weitere relevante Inhalte zu class in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!