In deze tutorial leer je aan de hand van voorbeelden over prototypes in JavaScript.
Bekijk deze tutorials voordat u prototypes leert:
- JavaScript-objecten
- JavaScript Constructor-functie
Zoals u weet, kunt u een object in JavaScript maken met behulp van een objectconstructorfunctie. Bijvoorbeeld,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
In het bovenstaande voorbeeld function Person()is een objectconstructorfunctie. We hebben twee objecten gemaakt person1en person2daaruit.
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 value console.log(Person.prototype); // (… )
In het bovenstaande voorbeeld proberen we toegang te krijgen tot de prototype-eigenschap van een Personconstructorfunctie.
Aangezien de prototype-eigenschap momenteel geen waarde heeft, toont het een leeg object (…).
Prototype overerving
In JavaScript kan een prototype worden gebruikt om eigenschappen en methoden toe te voegen aan een constructorfunctie. En objecten erven eigenschappen en methoden van een prototype. Bijvoorbeeld,
// 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);
Uitvoer
(geslacht: "mannelijk") mannelijk mannelijk
In het bovenstaande programma hebben we een nieuwe eigenschap genderaan de Personconstructorfunctie toegevoegd met behulp van:
Person.prototype.gender = 'male';
Object person1en person2erft de eigenschap gendervan de prototype-eigenschap van de Personconstructorfunctie.
Daarom hebben zowel objecten person1als person2toegang tot de eigenschap geslacht.
Opmerking: de syntaxis om de eigenschap toe te voegen aan een objectconstructorfunctie is:
objectConstructorName.prototype.key = 'value';
Prototype wordt gebruikt om een extra eigenschap te geven aan alle objecten die zijn gemaakt met een constructorfunctie.
Methoden toevoegen aan een constructorfunctie met behulp van een prototype
U kunt ook nieuwe methoden toevoegen aan een constructorfunctie met behulp van een prototype. Bijvoorbeeld,
// 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
In het bovenstaande programma wordt een nieuwe methode greetaan de Personconstructorfunctie toegevoegd met behulp van een prototype.
Prototype veranderen
Als een prototypewaarde wordt gewijzigd, hebben alle nieuwe objecten de gewijzigde eigenschapswaarde. Alle eerder gemaakte objecten hebben de vorige waarde. Bijvoorbeeld,
// 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
Opmerking : u mag de prototypes van standaard ingebouwde JavaScript-objecten zoals strings, arrays, enz. Niet wijzigen. Dit wordt als een slechte gewoonte beschouwd.
JavaScript Prototype Chaining
Als een object toegang probeert te krijgen tot dezelfde eigenschap in de constructorfunctie en het prototype-object, neemt het object de eigenschap over van de constructorfunctie. Bijvoorbeeld,
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
In het bovenstaande programma wordt een eigenschapnaam gedeclareerd in de constructorfunctie en ook in de prototype-eigenschap van de constructorfunctie.
Wanneer het programma wordt uitgevoerd, person1.namekijkt in de constructorfunctie om te zien of er een eigenschap is met de naam name. Omdat de constructorfunctie de eigenschap name met waarde heeft 'John', krijgt het object waarde van die eigenschap.
Wanneer het programma wordt uitgevoerd, person1.agekijkt in de constructorfunctie om te zien of er een eigenschap is met de naam age. Omdat de constructorfunctie geen ageeigenschap heeft, kijkt het programma naar het prototype-object van de constructorfunctie en neemt het object de eigenschap over van het prototype-object (indien beschikbaar).
Opmerking : u hebt ook toegang tot de eigenschap prototype van een constructorfunctie vanuit een object.
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 )
In het bovenstaande voorbeeld wordt een personobject gebruikt om toegang te krijgen tot de prototype-eigenschap met __proto__. Het __proto__is echter verouderd en u moet het niet gebruiken.
