Einführung: Die meisten Artikel über 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. BeispielWir 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 SoldatenWas 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 stellenMit dem obigen Code gibt es ein Problem: Es wird viel Speicher verschwendet.
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 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 Solange Sie das
7. Dieses Mal verwenden wir new zum SchreibenFunktion 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 Soldat.Prototyp = { Konstruktor: Soldat} Wenn Sie „ 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 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:
|
<<: Docker-Image erstellen Dockerfile und Commit-Operationen
>>: Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.
Problembeschreibung 1. Datenbank der Sammelstelle...
Da dies mein erster Beitrag ist, weisen Sie mich ...
Heute möchte ich einen Countdown von Vue und Mome...
1. Einleitung Da Bilder viel Platz beanspruchen u...
Wenn die Bilder des Servers von anderen Websites ...
Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...
Inhaltsverzeichnis Entwicklungsumgebung Game-Engi...
Wenn wir den Tabellennamen ändern oder die Tabell...
Vorwort Die erstmals in ES6 eingeführte „Destruct...
Wie in der Abbildung gezeigt: Tabellendaten Wie e...
Wie wir alle wissen, sind Binlog-Protokolle für M...
Inhaltsverzeichnis 1. Szenariobeschreibung 2. Lös...
1. Übersicht 1.1 Grundlegende Konzepte: Docker is...
Mit der kontinuierlichen Entwicklung der Internetw...
Detaillierte Erklärung zum Ersetzen in ein Beispi...