Voordat je prototypes leert, moet je eerst deze tutorials bekijken:
- JavaScript Objects
- JavaScript Constructor Function
Zoals je weet, kun je in JavaScript een object maken met behulp van een object constructor functie. Bijvoorbeeld,
// constructor functionfunction Person () { this.name = 'John', this.age = 23}// creating objectsconst person1 = new Person();const person2 = new Person();In het bovenstaande voorbeeld is function Person() een object constructor functie. We hebben er twee objecten van gemaakt person1 en person2.
JavaScript Prototype
In JavaScript heeft elke functie en elk object standaard een eigenschap met de naam prototype. Bijvoorbeeld,
function Person () { this.name = 'John', this.age = 23}const person = new Person();// checking the prototype valueconsole.log(Person.prototype); // { ... }In het bovenstaande voorbeeld proberen we de prototype eigenschap van een Person constructor functie te benaderen.
Omdat de prototype eigenschap op dit moment geen waarde heeft, laat het een leeg object { … }.
Prototype-erfenis
In JavaScript kan een prototype worden gebruikt om eigenschappen en methoden aan een constructorfunctie toe te voegen. En objecten erven eigenschappen en methoden van een prototype. Bijvoorbeeld,
// 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);Uitvoer
{ gender: "male" }malemale
In het bovenstaande programma hebben we een nieuwe eigenschap gender toegevoegd aan de Person constructorfunctie met behulp van:
Person.prototype.gender = 'male';Dan erft object person1 en person2 de eigenschap gender van de prototype eigenschap van Person constructorfunctie.
Hiermee hebben beide objecten person1 en person2 toegang tot de eigenschap geslacht.
Opmerking: De syntaxis om de eigenschap aan een object-constructorfunctie toe te voegen is:
objectConstructorName.prototype.key = 'value';Prototype wordt gebruikt om een extra eigenschap te geven aan alle objecten die met een constructorfunctie worden gemaakt.
Methoden aan een constructorfunctie toevoegen met prototype
U kunt ook nieuwe methoden aan een constructorfunctie toevoegen met prototype. Bijvoorbeeld,
// 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 JohnIn het bovenstaande programma is een nieuwe methode greet toegevoegd aan de Person constructorfunctie met behulp van een prototype.
Veranderen van prototype
Als de waarde van een prototype wordt gewijzigd, zullen alle nieuwe objecten de gewijzigde waarde van de eigenschap hebben. Alle eerder gemaakte objecten krijgen de vorige waarde. Bijvoorbeeld,
// 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); // 20Note: Je moet de prototypes van standaard JavaScript ingebouwde objecten zoals strings, arrays, etc. niet wijzigen. Dit wordt beschouwd als een slechte gewoonte.
JavaScript Prototype Chaining
Als een object toegang probeert te krijgen tot dezelfde eigenschap die in de constructorfunctie en in het prototype-object staat, neemt het object de eigenschap van de constructorfunctie over. Bijvoorbeeld,
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); // 23In het bovenstaande programma wordt een eigenschapsnaam gedeclareerd in de constructor-functie en ook in de prototype-eigenschap van de constructor-functie.
Wanneer het programma wordt uitgevoerd, kijkt person1.name in de constructorfunctie of er een eigenschap met de naam name is. Aangezien de constructorfunctie de eigenschap name heeft met waarde 'John', neemt het object de waarde van die eigenschap over.
Wanneer het programma wordt uitgevoerd, kijkt person1.age in de constructorfunctie of er een eigenschap is met de naam age. Aangezien de constructor functie geen age eigenschap heeft, kijkt het programma in het prototype object van de constructor functie en het object erft eigenschap van het prototype object (indien beschikbaar).
Opmerking: u kunt de prototype-eigenschap van een constructorfunctie ook vanuit een object benaderen.
function Person () { this.name = 'John'}// adding a prototypePerson.prototype.age = 24;// creating objectconst person = new Person();// accessing prototype propertyconsole.log(person.__proto__); // { age: 24 }In het bovenstaande voorbeeld wordt een person object gebruikt om de prototype-eigenschap te benaderen met __proto____proto__ is echter verouderd en u moet het gebruik ervan vermijden.