JavaScript-Prototyp

Bevor Sie Prototypen lernen, sollten Sie sich diese Tutorials ansehen:

• JavaScript-Objekte
• JavaScript-Konstruktorfunktion

Wie Sie wissen, können Sie ein Objekt in JavaScript mithilfe einer Objekt-Konstruktorfunktion erstellen. Zum Beispiel,

// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();

Im obigen Beispiel ist function Person() eine Objektkonstruktorfunktion. Wir haben daraus zwei Objekte person1 und person2 erzeugt.

JavaScript Prototype

In JavaScript hat jede Funktion und jedes Objekt standardmäßig eine Eigenschaft namens Prototype. Zum Beispiel,

function Person () { this.name = 'John', this.age = 23}const person = new Person();// checking the prototype valueconsole.log(Person.prototype); // { ... }

Im obigen Beispiel versuchen wir, auf die Prototype-Eigenschaft einer Person Konstruktorfunktion zuzugreifen.

Da die Prototype-Eigenschaft im Moment keinen Wert hat, zeigt sie ein leeres Objekt { … }.

Prototyp-Vererbung

In JavaScript kann ein Prototyp verwendet werden, um einer Konstruktorfunktion Eigenschaften und Methoden hinzuzufügen. Und Objekte erben Eigenschaften und Methoden von einem Prototyp. Beispiel:

// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();// adding property to constructor functionPerson.prototype.gender = 'male';// prototype value of Personconsole.log(Person.prototype);// inheriting the property from prototypeconsole.log(person1.gender);console.log(person2.gender);

Ausgabe

{ gender: "male" }malemale

Im obigen Programm haben wir eine neue Eigenschaft gender zur Person Konstruktorfunktion mit hinzugefügt:

Person.prototype.gender = 'male';

Dann erbt das Objekt person1 und person2 die Eigenschaft gender von der Prototyp-Eigenschaft der Person Konstruktorfunktion.

Damit können beide Objekte person1 und person2 auf die Eigenschaft gender zugreifen.

objectConstructorName.prototype.key = 'value';

Prototype wird verwendet, um allen Objekten, die von einer Konstruktorfunktion erzeugt werden, eine zusätzliche Eigenschaft zu geben.

Methoden zu einer Konstruktorfunktion mit Prototyp hinzufügen

Sie können auch neue Methoden zu einer Konstruktorfunktion mit Prototyp hinzufügen. Beispiel:

// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();// adding a method to the constructor functionPerson.prototype.greet = function() { console.log('hello' + ' ' + this.name);}person1.greet(); // hello Johnperson2.greet(); // hello John

Im obigen Programm wird der greet Konstruktorfunktion eine neue Methode Person mit Hilfe eines Prototyps hinzugefügt.

Prototyp ändern

Wenn ein Prototypwert geändert wird, dann haben alle neuen Objekte den geänderten Eigenschaftswert. Alle zuvor erstellten Objekte haben den vorherigen Wert. Zum Beispiel,

// constructor functionfunction Person() { this.name = 'John'}// add a propertyPerson.prototype.age = 20;// creating an objectconst person1 = new Person();console.log(person1.age); // 20// changing the property value of prototypePerson.prototype = { age: 50 }// creating new objectconst person3 = new Person();console.log(person3.age); // 50console.log(person1.age); // 20

Hinweis: Sie sollten die Prototypen von standardmäßig in JavaScript eingebauten Objekten wie Strings, Arrays usw. nicht ändern.

JavaScript Prototype Chaining

Wenn ein Objekt versucht, auf dieselbe Eigenschaft zuzugreifen, die in der Konstruktorfunktion und im Prototyp-Objekt enthalten ist, übernimmt das Objekt die Eigenschaft aus der Konstruktorfunktion. Beispiel:

function Person() { this.name = 'John'}// adding property Person.prototype.name = 'Peter';Person.prototype.age = 23const person1 = new Person();console.log(person1.name); // Johnconsole.log(person1.age); // 23

Im obigen Programm ist ein Eigenschaftsname in der Konstruktorfunktion und auch in der Prototypeigenschaft der Konstruktorfunktion deklariert.

Wenn das Programm ausgeführt wird, schaut person1.name in der Konstruktorfunktion nach, ob es eine Eigenschaft namens name gibt. Da die Konstruktorfunktion die Eigenschaft name mit dem Wert 'John' hat, übernimmt das Objekt den Wert dieser Eigenschaft.

Wenn das Programm ausgeführt wird, schaut person1.age in der Konstruktorfunktion nach, ob es eine Eigenschaft namens age gibt. Da die Konstruktorfunktion keine age-Eigenschaft hat, schaut das Programm in das Prototyp-Objekt der Konstruktorfunktion und das Objekt erbt die Eigenschaft von dem Prototyp-Objekt (falls vorhanden).

Hinweis: Sie können auch von einem Objekt aus auf die Prototypeigenschaft einer Konstruktorfunktion zugreifen.

function Person () { this.name = 'John'}// adding a prototypePerson.prototype.age = 24;// creating objectconst person = new Person();// accessing prototype propertyconsole.log(person.__proto__); // { age: 24 }

Im obigen Beispiel wird ein person-Objekt verwendet, um mit __proto__ auf die Prototypeigenschaft zuzugreifen. __proto__ ist jedoch veraltet und sollte nicht mehr verwendet werden.