Detaillierte Erläuterung der Verwendung von CLASS in JavaScript ES6

Vorwort

Für JavaScript sind Klassen ein optionales (aber nicht erforderliches) Entwurfsmuster, und es ist sehr lahm, Klassen in [[Prototyp]]-Sprachen wie JavaScript zu implementieren.

Dieses lahme Gefühl kommt nicht nur von der Grammatik, obwohl Grammatik ein sehr wichtiger Grund ist. Es gibt viele grammatikalische Mängel in js: umständliche und chaotische .prototype-Referenzen, expliziter Pseudopolymorphismus beim Versuch, gleichnamige Funktionen auf der oberen Ebene der Prototypenkette aufzurufen, und .constructor, der unzuverlässig, unansehnlich ist und leicht als a missverstanden werden kann „Konstrukteur“.

Darüber hinaus gibt es tatsächlich noch weitere Probleme bei der Klassengestaltung. In traditionellen klassenorientierten Sprachen gibt es tatsächlich einen Kopiervorgang zwischen übergeordneter Klasse und Unterklasse, Unterklasse und Instanz, in [[Prototype]] gibt es jedoch kein Kopieren.

Der Objektzuordnungscode und die Verhaltensdelegierung verwenden [[Prototyp]], anstatt ihn aufgrund seiner Einfachheit zu verbergen. Es ist ersichtlich, dass Klassen nicht für JavaScript geeignet sind.

Verwendung von CLASS in ES6

Die traditionelle Methode von JavaScript besteht darin, beim Generieren einer Objektinstanz einen Konstruktor zu definieren und ihn dann durch neu zu vervollständigen.

function StdInfo(){
  this.name = "job";     
  this.age = 30;     
}
 
StdInfo.prototype.getNames = function (){
  console.log("name："+this.name);       
}
//得到一个学员信息对象
var p = new StdInfo()

In JavaScript gibt es nur Objekte, keine Klassen. Es handelt sich um eine prototypbasierte Sprache. Das Prototypobjekt ist die Vorlage eines neuen Objekts und teilt seine eigenen Eigenschaften mit dem neuen Objekt. Diese Schreibweise unterscheidet sich stark von herkömmlichen objektorientierten Sprachen und kann Anfänger leicht verwirren.

Klassen definieren

In ES6 wurden Klassen als Vorlagen für Objekte hinzugefügt. Definieren Sie eine Klasse durch eine Klasse:

//定义类
class StdInfo {
  constructor(){
    this.name = "job";     
    this.age = 30;  
  }
  //定义在类中的方法不需要添加function
  getNames(){
    console.log("name："+this.name);  
  }
}
//使用new的方式得到一个实例对象
var p = new StdInfo();

Die obige Schreibweise ist klarer, ähnelt eher der Syntax der objektorientierten Programmierung und scheint leichter zu verstehen. Die durch

definierten Klassen sind lediglich syntaktischer Zucker. Der Zweck besteht darin, es uns zu ermöglichen, Objekte zu erstellen und die zugehörige Vererbung mit einer prägnanteren und klareren Syntax zu handhaben.

//定义类
class StdInfo {
  //...
}
console.log(typeof StdInfo); //function
 
console.log(StdInfo === StdInfo.prototype.constructor); //true

Wie aus dem obigen Test ersichtlich ist, ist der Typ der Klasse eine Funktion, eine „spezielle Funktion“, die auf den Konstruktor verweist.

Es gibt zwei Möglichkeiten, Funktionen zu definieren: Funktionsdeklaration und Funktionsausdruck. Es gibt auch zwei Möglichkeiten, Klassen zu definieren: Klassendeklaration und Klassenausdruck.

Klassendeklaration

Eine Klassendeklaration ist eine Möglichkeit, eine Klasse zu definieren, indem das Schlüsselwort class, gefolgt vom Klassennamen und dann einem Paar geschweifter Klammern verwendet wird. Setzen Sie die Methoden, die definiert werden müssen, in geschweifte Klammern.

//定义类，可以省略constructor
class StdInfo {
  getNames(){
    console.log("name："+this.name);
  }
}
// -------------------------------------
//定义类，加上constructor
class StdInfo {
  //使用new定义实例对象时，自动调用这个函数，传入参数
  constructor(name,age){
    this.name = name;     
    this.age = age;  
  }
   
  getNames(){
    console.log("name："+this.name);  
  }
}
//定义实例对象时，传入参数
var p = new StdInfo("job",30)

Constructor ist eine Standardmethode. Wenn Sie new zum Definieren eines Instanzobjekts verwenden, wird die Konstruktorfunktion automatisch ausgeführt und die erforderlichen Parameter werden übergeben. und der Konstruktor wird ausgeführt. Anschließend wird das Instanzobjekt automatisch zurückgegeben.

Es kann nur eine Konstruktorfunktion in einer Klasse geben. Wenn Sie mehrere Konstruktoren definieren, wird ein Fehler gemeldet.

Dies im Konstruktor zeigt auf das neu erstellte Instanzobjekt. Verwenden Sie dies, um Eigenschaften auf das neu erstellte Instanzobjekt zu erweitern.

Beim Definieren eines Instanzobjekts müssen Sie in der Initialisierungsphase nichts tun. Sie können die Konstruktorfunktion schreiben, ohne sie anzuzeigen. Wenn nicht explizit definiert, wird standardmäßig eine leere Konstruktormethode hinzugefügt. {} eine Funktion als Wert für eine Variable. Sie können die definierte Klasse einer Variablen zuweisen. In diesem Fall ist die Variable der Klassenname. Der Klassenname nach dem Klassenschlüsselwort ist optional und kann nur innerhalb der Klasse verwendet werden.

Nach der Definitionsklasse steht ein Klassenname:

const People = class StdInfo {
  constructor(){
    console.log(StdInfo); //可以打印出值，是一个函数
  }
}
 
new People();
new StdInfo(); //报错，StdInfo is not defined；

Nach der Definitionsklasse steht kein Klassenname:

const People = class {
  constructor(){
 
  }
}
 
new People();

Sofort ausgeführte Klassen:

const p = new class {
  constructor(name,age){
    console.log(name,age);
  }
}("job",30)

Sofort ausgeführte Klassen müssen vorher hinzugefügt werden die Klasse Auf neu. p ist ein Instanzobjekt der Klasse.

Keine Variablenheraufstufung

In definierten Klassen gibt es keine Variablenheraufstufung. Sie können die Klasse nur zuerst definieren und dann verwenden, was sich von der Funktionsdeklaration unterscheidet.

//-----函数声明-------
//定义前可以先使用，因为函数声明提升的缘故，调用合法。
func();
function func(){}
 
//-----定义类---------------
new StdInfo(); //报错，StdInfo is not defined
class StdInfo{}

EXTENDS-Vererbung

Verwenden Sie das Schlüsselwort „extens“, um die Vererbung zwischen Klassen zu implementieren. Dies ist viel praktischer als die Verwendung der Vererbung in ES5.

//定义类父类
class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
 
  speakSometing(){
    console.log("I can speek chinese");
  }
}
//定义子类，继承父类
class Child extends Parent {
  coding(){
    console.log("coding javascript");
  }
}
 
var c = new Child();
 
//可以调用父类的方法
c.speakSometing(); // I can speek chinese

Durch Vererbung verfügt die Unterklasse über die Methoden der übergeordneten Klasse.

Wenn die Unterklasse einen Konstruktorkonstruktor enthält, müssen Sie super verwenden.

//定义类父类
class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
 
  speakSometing(){
    console.log("I can speek chinese");
  }
}
//定义子类，继承父类
class Child extends Parent {
  constructor(name,age){
    //不调super()，则会报错 this is not defined
 
    //必须调用super
    super(name,age);
  }
 
  coding(){
    console.log("coding javascript");
  }
}
 
var c = new Child("job",30);
 
//可以调用父类的方法
c.speakSometing(); // I can speek chinese

Die Unterklasse muss die Supermethode in der Konstruktormethode aufrufen, andernfalls wird beim Erstellen einer neuen Instanz ein Fehler (dieser ist nicht definiert) gemeldet . Dies liegt daran, dass die Unterklasse kein eigenes This-Objekt hat, sondern das This-Objekt der übergeordneten Klasse erbt und es dann verarbeitet. Wenn die Supermethode nicht aufgerufen wird, erhält die Unterklasse dieses Objekt nicht.