In diesem Tutorial lernen Sie anhand von Beispielen Prototypen in JavaScript kennen.
Lesen Sie die folgenden Tutorials, bevor Sie Prototypen lernen:
- JavaScript-Objekte
- JavaScript-Konstruktorfunktion
Wie Sie wissen, können Sie ein Objekt in JavaScript mithilfe einer Objektkonstruktorfunktion erstellen. Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Im obigen Beispiel function Person()handelt es sich um eine Objektkonstruktorfunktion. Wir haben zwei Objekte erstellt person1und person2daraus.
JavaScript-Prototyp
In JavaScript verfügt jede Funktion und jedes Objekt standardmäßig über eine Eigenschaft namens Prototyp. Beispielsweise,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Im obigen Beispiel versuchen wir, auf die Prototyp-Eigenschaft einer PersonKonstruktorfunktion zuzugreifen .
Da die Prototyp-Eigenschaft derzeit keinen Wert hat, wird ein leeres Objekt angezeigt (…).
Vererbung von Prototypen
In JavaScript kann ein Prototyp verwendet werden, um einer Konstruktorfunktion Eigenschaften und Methoden hinzuzufügen. Und Objekte erben Eigenschaften und Methoden von einem Prototyp. Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Ausgabe
(Geschlecht: "männlich") männlich männlich
Im obigen Programm haben wir genderder PersonKonstruktorfunktion eine neue Eigenschaft hinzugefügt, indem wir :
Person.prototype.gender = 'male';
Objekt person1und person2erbt dann die Eigenschaft gendervon der Prototyp-Eigenschaft der PersonKonstruktorfunktion.
Daher können beide Objekte person1und person2auf die Eigenschaft gender zugreifen.
Hinweis: Die Syntax zum Hinzufügen der Eigenschaft zu einer Objektkonstruktorfunktion lautet:
objectConstructorName.prototype.key = 'value';
Der Prototyp wird verwendet, um allen Objekten, die mit einer Konstruktorfunktion erstellt wurden, zusätzliche Eigenschaften bereitzustellen.
Hinzufügen von Methoden zu einer Konstruktorfunktion mithilfe des Prototyps
Sie können einer Konstruktorfunktion auch mithilfe des Prototyps neue Methoden hinzufügen. Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
Im obigen Programm greetwird der PersonKonstruktorfunktion unter Verwendung eines Prototyps eine neue Methode hinzugefügt .
Prototyp ändern
Wenn ein Prototypwert geändert wird, haben alle neuen Objekte den geänderten Eigenschaftswert. Alle zuvor erstellten Objekte haben den vorherigen Wert. Beispielsweise,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Hinweis : Sie sollten die Prototypen von in JavaScript integrierten Standardobjekten wie Zeichenfolgen, Arrays usw. nicht ändern. Dies wird als schlechte Vorgehensweise angesehen.
Verkettung von JavaScript-Prototypen
Wenn ein Objekt versucht, auf dieselbe Eigenschaft zuzugreifen, die sich in der Konstruktorfunktion und im Prototypobjekt befindet, übernimmt das Objekt die Eigenschaft aus der Konstruktorfunktion. Beispielsweise,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
Im obigen Programm wird ein Eigenschaftsname in der Konstruktorfunktion und auch in der Prototypeigenschaft der Konstruktorfunktion deklariert.
Wenn das Programm ausgeführt wird, person1.nameprüft es in der Konstruktorfunktion, ob eine Eigenschaft mit dem Namen vorhanden ist name. Da die Konstruktorfunktion die Eigenschaft name mit value hat 'John', übernimmt das Objekt den Wert dieser Eigenschaft.
Wenn das Programm ausgeführt wird, person1.ageprüft es in der Konstruktorfunktion, ob eine Eigenschaft mit dem Namen vorhanden ist age. Da die Konstruktorfunktion keine ageEigenschaft hat, untersucht das Programm das Prototypobjekt der Konstruktorfunktion und das Objekt erbt die Eigenschaft vom Prototypobjekt (falls verfügbar).
Hinweis : Sie können auch von einem Objekt aus auf die Prototyp-Eigenschaft einer Konstruktorfunktion zugreifen.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
Im obigen Beispiel wird ein personObjekt verwendet, um mit auf die Prototyp-Eigenschaft zuzugreifen __proto__. Wurde __proto__jedoch veraltet und Sie sollten es vermeiden.
