JS beherrscht schnell die Verwendung von ES6-Klassen

1. Wie konstruieren?

Lassen Sie uns die allgemeinen Methoden zum Erstellen von Klassen in es5 überprüfen: Zunächst einmal verwendet es5 Prototypen für Objektmethoden. Warum also nicht Methoden im Konstruktor hinzufügen? Denn beim Instanziieren eines Objekts werden viele identische Methoden wiederholt erstellt, was zu einer Verschwendung von Ressourcen führt. Sie müssen also die Methode des Objekts in den Prototyp einbinden.

Das Bindungsproblem zwischen „new“ und „this“ lässt sich grob wie folgt vereinfachen:

• Erstellen Sie zunächst ein neues Objekt durch new
• Dann binden Sie dieses Objekt an das this des Konstruktors
• Dann binden Sie das Prototypobjekt dieses konstruierten Objekts
• Zum Schluss wird dieses Objekt an das zuvor definierte Objekt zurückgegeben.

Schauen wir uns also ein Beispiel an:

Funktion Tier(Name,Alter){
  dieser.name = Name
  this.age = Alter
  
  // Dies ist eine Verschwendung von Ressourcen // this.eat = function(){
  // console.log("Ich habe heute zu Abend gegessen")
  // }
}

// Richtiger Ansatz Animal.prototype.eat=function(){
  console.log("Ich habe heute zu Abend gegessen")
}

Verwenden Sie dann die ES6-Klasse, die diesen Vorgang offensichtlich vereinfacht.

const dog = new Animal("wangcai",2) // Wird einen Fehler melden. Um schlechte Angewohnheiten zu korrigieren, wird ES6, wie let und const, die Klasse nicht befördern.

Klasse Tier{
  Konstruktor(Name,Alter){
    dieser.name = Name 
    this.age = Alter 
  }
  
    essen(){
    console.log("Ich habe heute zu Abend gegessen")
  }
}

cosnt dog = new Animal("wangcai",2) //korrekte Position

Darüber hinaus fügt die Klasse auch statische Methoden, Set-, Get- und andere Operationen hinzu.

Klasse Tier{
  Konstruktor(Name,Alter){
    dieser.name = Name 
    this.age = Alter 
  }
  
    essen(){
    console.log("Ich habe heute zu Abend gegessen")
  }
  

 setze Name(Wert){
    this.tempname = "Lao Tie" + Wert
  }
  
  Name abrufen(){
    gib diesen.tempnamen zurück
  }
  
  statische Einführung () {
    console.log("Ich bin jetzt eine Tierklasse")
  }
}

//setzen() holen()
const Hund = neues Tier("giao",2)
Hund.name="agiao" 
console.log(Hundename) // Laotieagiao

// Statische Methode Animal.introuduce() // Ich bin jetzt eine Tierklasse

Bevor wir über Vererbung sprechen, möchte ich noch einen kleinen Wissenspunkt hinzufügen: Der Methodenname der Klasse kann durch Berechnen der Attributoperation benannt werden.

let tempname = "giao"
Klasse Tier{
   Konstruktor(Name,Alter){
    dieser.name = Name 
    this.age = Alter 
  }
  
  [temp.name](){
    console.log("Gib mir ein Giao")
  }
}

const xiaoagiao = neues Tier("giaoge",30)
xiaoagiao.giao() // Gib mir ein Giao

2. Vererbung

Zurück zur Frage der Vererbung: Wie erbt es5?

Funktion Tier(Name){
  dieser.name = Name
}
Tier.Prototyp.break(){
  console.log("Schrei!")
}

Funktion Hund (Name, Alter) {
  Tier.ruf(diesen,Name)
  this.age = Alter
}

Hund.Prototyp = neues Tier()
Dog.prototype.constructor = Hund

Dies wird als Kompositionsvererbung bezeichnet. Wie wird es kombiniert?

Die Vererbung von Eigenschaften ist geliehene Vererbung. Sie können sehen, dass Animal.call(this,name) dem einmaligen Aufruf der Funktion Animal im Konstruktor Dog entspricht. Obwohl die Eigenschaften in der Prototypenkette nicht verknüpft sind, wird der Code auf Dog ausgeführt, sodass er natürlich die Namenseigenschaft von Animal erbt.

Tier.ruf(diesen,Name)

Die Vererbung von Methoden ist Prototypvererbung. Wie wir alle wissen, generiert eine Funktion bei ihrer Erstellung ein Prototypobjekt. Die Prototypeigenschaft dieser Funktion verweist auf ihr Prototypobjekt, und die Konstruktoreigenschaft des Prototypobjekts verweist auf diese Funktion. Wenn Sie „new“ verwenden, um eine neue Instanz dieser Funktion zu erstellen, verfügt diese Instanz über eine __proto__-Eigenschaft, die auf das Prototypobjekt der Funktion verweist. Daher verweisen wir durch Ausleihen der Funktionsinstanz auf das Funktionsprototypobjekt. Wir instanziieren die geerbte Funktion und weisen das instanziierte Objekt dann der Prototypeigenschaft des geerbten Konstruktors zu, wodurch eine Kettenstruktur entsteht. Da die Instanziierung der geerbten Funktion jedoch nicht über das Konstruktorattribut verfügt, müssen wir ihren Konstruktor auf den geerbten Konstruktor verweisen.

Hund.Prototyp = neues Tier()
Dog.prototype.constructor = Hund

Gemäß dieser Routine verwenden wir also die es5-Syntax, um den Namen und die Break-Methoden der Funktion „Animal“ von der Funktion „Dog“ zu erben.

Also, wie macht ES6 das?

Klasse Tier{
  Konstruktor(Name){
    dieser.name = Name 
  }
  
  brechen(){
    console.log("Schrei!")
    }
}

Klasse Hund erweitert Tier {
  Konstruktor (Name, Alter) {
    super(Name)
    this.age=Alter
  }
}

Jetzt müssen Sie beim Deklarieren der Klasse „Dog“ nur noch ein „extended Animal“ hinzufügen und dann im Konstruktor ein „super“ hinzufügen.

Dieser Super(Name) entspricht Animal.call(this,name). Um das Methodenproblem müssen Sie sich keine Sorgen machen. Die Funktion extends behandelt es automatisch, sodass Sie keinen Prototypen verwenden müssen, um darauf zu verweisen.

Oben finden Sie ausführliche Informationen dazu, wie Sie die Verwendung der ES6-Klasse in JS schnell beherrschen. Weitere Informationen zur Verwendung der JS ES6-Klasse finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!