Detaillierte Beschreibung der Funktion von new in JS

Detaillierte Beschreibung der Funktion von new in JS

Einführung:

Die meisten Artikel über new beginnen mit objektorientiertem Denken, ich bin jedoch der Meinung, dass bei der Erklärung einer Sache nicht gleichzeitig eine andere, komplexere Sache eingeführt werden sollte.

Stellen Sie sich vor, wir entwickeln ein strategisches Kriegsspiel, bei dem die Spieler eine Gruppe Soldaten steuern und damit den Feind angreifen können.

Konzentrieren wir uns auf den Teil des Spiels, bei dem es darum geht, „Soldaten zu machen“.

Ein Soldat wird im Computer durch eine Reihe von Attributen dargestellt, wie unten gezeigt:

1. Beispiel

Wir können einen Soldaten einfach so erstellen:

var Soldat = {
  ID: 1, // Wird verwendet, um den Typ jedes Soldaten zu unterscheiden: „Amerikanischer Soldat“,
  Angriffskraft: 5,
  PS:42, 
  Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
  Ausführen: function(){ /*Ausführen von Code*/ },
  Tod: function(){ /*Stirb*/ },
  Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
  Verteidigung: function(){ /*Schütze das Gesicht*/ }
}

Kaserne. Fertigung (Soldaten)

2. Erstelle 100 Soldaten

Was wäre, wenn Sie 100 Soldaten erstellen müssten?

Lassen Sie uns die Schleife 100 Mal ausführen:

var Soldaten = []
var Soldat für (var i = 0; i < 100; i++) {
  Soldat = {
    ID: i, // ID kann nicht wiederholt werden. Soldat: "Amerikanischer Soldat",
    Angriffskraft: 5,
    PS:42, 
    Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
    Ausführen: function(){ /*Ausführen von Code*/ },
    Tod: function(){ /*Stirb*/ },
    Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
    Verteidigung: function(){ /*Schütze das Gesicht*/ }
  }
  Soldaten.push(Soldat)
}

Kaserne. Massenproduktion (Soldaten)

3. Fragen stellen

Mit dem obigen Code gibt es ein Problem: Es wird viel Speicher verschwendet.

  • Die fünf Aktionen Gehen, Rennen, Sterben, Angreifen und Verteidigen sind für jeden Soldaten tatsächlich gleich. Sie müssen nur auf dieselbe Funktion verweisen. Es ist nicht erforderlich, wiederholt 100 Gehen, 100 Rennen usw. zu erstellen.
  • Diese Soldaten haben den gleichen Typ und die gleiche Angriffskraft, es ist also nicht nötig, sie 100 Mal zu erstellen.
  • Lediglich die ID und Gesundheitswerte müssen 100x erstellt werden, da jeder Soldat seine eigene ID und Gesundheitswerte hat.

4. Verbesserungen

Diejenigen, die unsere vorherigen Kolumnenartikel (JS-Prototypenkette) gelesen haben, müssen wissen, dass die Prototypenkette das Problem der wiederholten Erstellung lösen kann: Wir erstellen zuerst einen "Soldatenprototyp" und lassen dann __proto__ von "Soldat" auf den "Soldatenprototyp" verweisen.

var SoldatPrototyp = {
  Wappen: "Amerikanischer Soldat",
  Angriffskraft: 5,
  Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
  Ausführen: function(){ /*Ausführen von Code*/ },
  Tod: function(){ /*Stirb*/ },
  Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
  Verteidigung: function(){ /*Schütze das Gesicht*/ }
}
var Soldaten = []
var Soldat für (var i = 0; i < 100; i++) {
  Soldat = {
    ID: i, // ID kann nicht wiederholt werden Lebenswert: 42
  }

  /*Schreiben Sie dies nicht in Ihre tatsächliche Arbeit, da __proto__ kein Standardattribut ist*/
  Soldier.__proto__ = Soldaten-Prototyp Soldiers.push(Soldat)
}

Kaserne. Massenproduktion (Soldaten)

5. Elegant?

Jemand hat darauf hingewiesen, dass es nicht elegant ist, den Code zum Erstellen eines Soldaten an zwei Stellen zu haben. Daher verwenden wir eine Funktion, um die beiden Teile zu verbinden:

Funktion Soldat(ID){
  var temporäres Objekt = {}

  temporäres Objekt.__proto__ = Soldat.Prototyp temporäres Objekt.ID = ID
  TemporäresObjekt.Lebenswert = 42
  
  temporäres Objekt zurückgeben}

Soldat.Prototyp = {
  Wappen: "Amerikanischer Soldat",
  Angriffskraft: 5,
  Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
  Ausführen: function(){ /*Ausführen von Code*/ },
  Tod: function(){ /*Stirb*/ },
  Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
  Verteidigung: function(){ /*Schütze das Gesicht*/ }
}

// Als Datei speichern: soldier.js

Anschließend können Sie problemlos auf „Soldat“ verweisen, um einen Soldaten zu erstellen:

var Soldaten = []
für(var i=0; i<100; i++){
  Soldaten.push(Soldat(i))
}

Kaserne. Massenproduktion (Soldaten)

6. Fürsorge vom Vater von JS

Der Entwickler von JS hat das new Schlüsselwort erstellt, mit dem wir weniger Codezeilen schreiben können:

Solange Sie das new Schlüsselwort vor dem Soldaten verwenden, können Sie vier Dinge weniger tun:

  • Sie müssen keine temporären Objekte erstellen, da new dies für Sie erledigt (Sie können mit „ this “ auf das temporäre Objekt zugreifen).
  • Sie müssen keinen Prototyp binden, da new dies für Sie erledigt ( new gibt den Prototypnamen als prototype an, um zu wissen, wo sich der Prototyp befindet).
  • Sie müssen kein temporäres Objekt return , da new dies für Sie erledigt.
  • Überlegen Sie sich keinen Namen für den Prototyp, da new den Namen prototype vorgibt.

7. Dieses Mal verwenden wir new zum Schreiben

Funktion Soldat(ID){
  diese.ID = ID
  diese.Gesundheit = 42
}

Soldat.Prototyp = {
  Wappen: "Amerikanischer Soldat",
  Angriffskraft: 5,
  Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
  Ausführen: function(){ /*Ausführen von Code*/ },
  Tod: function(){ /*Stirb*/ },
  Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
  Verteidigung: function(){ /*Schütze das Gesicht*/ }
}

// Als Datei speichern: soldier.js

Erstellen Sie dann den Soldaten (fügen Sie ein neues Schlüsselwort hinzu):

var Soldaten = []
für(var i=0; i<100; i++){
  Soldaten.push(neuer Soldat(i))
}

Kaserne. Massenproduktion (Soldaten)

Der Zweck von „new“ besteht darin, einige Codezeilen einzusparen. (Auch als syntaktischer Zucker bekannt)

8. Achten Sie auf das Konstruktorattribut

Um aufzuzeichnen, „welche Funktion das temporäre Objekt erstellt hat“, fügt die new Operation im Voraus ein constructor zu „ prototype “ hinzu:

Soldat.Prototyp = {
  Konstruktor: Soldat}


Wenn Sie „ prototype “ neu zuweisen, geht die constructor Eigenschaft verloren. Sie sollten daher Folgendes schreiben:

Soldier.prototype.ArmyType = "Amerikanischer Soldat"
Soldat.Prototyp.Angriff = 5
Soldier.prototype.walk = function(){ /*Code zum Gehen von zwei Schritten*/}
Soldier.prototype.run = function(){ /*Code ausführen*/ }
soldier.prototype.death = function(){ /*Stirb*/ }
Soldier.prototype.attack = function(){ /*Sein Bärengesicht bürsten*/ }
Soldier.prototype.defense = function(){ /*Gesicht schützen*/ }


Oder Sie können constructor selbst neu zuweisen:

Soldat.Prototyp = {
  Konstrukteur: Soldat,
  Wappen: "Amerikanischer Soldat",
  Angriffskraft: 5,
  Gehen: function(){ /*Code zum Gehen von zwei Schritten*/},
  Ausführen: function(){ /*Ausführen von Code*/ },
  Tod: function(){ /*Stirb*/ },
  Angriff: function(){ /*Sein Bärengesicht streicheln*/ },
  Verteidigung: function(){ /*Schütze das Gesicht*/ }
}

Dies ist das Ende dieses ausführlichen Artikels über die Rolle von „new“ in JS. Weitere Informationen zur Rolle von „new“ in JS 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!

Das könnte Sie auch interessieren:
  • Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung
  • Detaillierte Erklärung des JavaScript-Prototyps und Beispiele
  • Ein Artikel, der Ihnen hilft, die Vererbung und Prototypenkette von JS zu verstehen
  • Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
  • Handschriftliche Implementierung von new in JS
  • Wie gut kennen Sie sich mit dem Konstruktor, Prototyp, der Prototypenkette und Neuem von JavaScript aus?

<<:  Docker-Image erstellen Dockerfile und Commit-Operationen

>>:  Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.

Artikel empfehlen

So stellen Sie Tencent Cloud Server von Grund auf bereit

Da dies mein erster Beitrag ist, weisen Sie mich ...

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

Heute möchte ich einen Countdown von Vue und Mome...

Verwenden Sie CSS, um spezielle Logos oder Grafiken zu implementieren

1. Einleitung Da Bilder viel Platz beanspruchen u...

So richten Sie Referer in Nginx ein, um Bilddiebstahl zu verhindern

Wenn die Bilder des Servers von anderen Websites ...

Detaillierte Erläuterung des Vue-Router-Routings

Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...

CocosCreator klassisches Einstiegsprojekt flappybird

Inhaltsverzeichnis Entwicklungsumgebung Game-Engi...

Zusammenfassung der Wissenspunkte zum MySQL ALTER-Befehl

Wenn wir den Tabellennamen ändern oder die Tabell...

Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript

Vorwort Die erstmals in ES6 eingeführte „Destruct...

Einführung in Docker-Container

1. Übersicht 1.1 Grundlegende Konzepte: Docker is...

Detaillierte Erklärung zum Ersetzen in ein Beispiel in MySQL

Detaillierte Erklärung zum Ersetzen in ein Beispi...