Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung, wie JavaScript das Prototypmuster zum Erstellen von Objektinstanzen verwendet

Ausführliche Erläuterung, wie JavaScript das Prototypmuster zum Erstellen von Objektinstanzen verwendet

ringa_lee
Freigeben: 2017-10-15 09:34:43
Original
1598 Leute haben es durchsucht

Prototypmodus


function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
Nach dem Login kopieren

Im Beispiel muss Person.prototype jedes Mal eingegeben werden, wenn Sie ein Attribut und eine Methode hinzufügen. Um unnötiges Tippen zu reduzieren und die Funktionalität des Prototyps besser visuell zu kapseln, besteht ein häufigerer Ansatz darin, das gesamte Prototypobjekt mit einem Objektliteral neu zu schreiben, das alle Eigenschaften und Methoden enthält, wie im folgenden Beispiel gezeigt.


function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};
Nach dem Login kopieren

Im obigen Code setzen wir Person.prototype gleich einem neuen Objekt, das als Objektliteral erstellt wurde. Das Endergebnis ist dasselbe, mit einer Ausnahme: Die Konstruktoreigenschaft zeigt nicht mehr auf eine Person. Wie bereits erwähnt, wird jedes Mal, wenn eine Funktion erstellt wird, gleichzeitig ihr Prototypobjekt erstellt, und dieses Objekt erhält automatisch das Konstruktorattribut. Die hier verwendete Syntax schreibt im Wesentlichen das Standardprototypobjekt vollständig neu, sodass die Konstruktoreigenschaft zur Konstruktoreigenschaft des neuen Objekts wird (auf den Objektkonstruktor verweist) und nicht mehr auf die Person-Funktion verweist. Zu diesem Zeitpunkt kann der Instanzof-Operator zwar immer noch das richtige Ergebnis zurückgeben, der Typ des Objekts kann jedoch nicht über den Konstruktor bestimmt werden, wie unten gezeigt.


var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true
Nach dem Login kopieren

Hier gibt die Verwendung des Instanzoperators zum Testen von Objekt und Person immer noch „true“ zurück, aber die Konstruktoreigenschaft ist gleich „Objekt“ und nicht gleich „Person“. Wenn der Wert des Konstruktors wirklich wichtig ist, können Sie ihn wie unten gezeigt absichtlich auf den entsprechenden Wert zurücksetzen.


function Person(){
}
 Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};
Nach dem Login kopieren

Zu beachten ist, dass der Zeiger in der Instanz nur auf den Prototyp zeigt, nicht auf den Konstruktor.

Probleme mit Prototypobjekten: Das Prototypmuster ist nicht ohne Mängel. Erstens entfällt die Notwendigkeit, Initialisierungsparameter an den Konstruktor zu übergeben, sodass alle Instanzen standardmäßig dieselben Eigenschaftswerte erhalten. Obwohl dies in gewissem Maße zu Unannehmlichkeiten führen wird, ist es nicht das größte Problem des Prototyps. Das größte Problem mit dem Prototypmuster wird durch seine gemeinsame Natur verursacht.


function Person(){
}
Person.prototype = {
 constructor: Person,
 name : "Nicholas",
 age : 29,
 job : "Software Engineer",
 friends : ["Shelby", "Court"],
 sayName : function () {
 alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie JavaScript das Prototypmuster zum Erstellen von Objektinstanzen verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage