JavaScript Prototypal Inheritance

Samenvatting: in deze tutorial leert u hoe de JavaScript prototypal inheritance werkt.

Inleiding tot JavaScript prototypal inheritance

Als u met andere objectgeoriënteerde programmeertalen zoals Java of C++ hebt gewerkt, bent u bekend met het inheritance-concept.

In dit programmeerparadigma is een klasse een blauwdruk voor het maken van objecten. Als u een nieuwe klasse de functionaliteit van een bestaande klasse wilt laten hergebruiken, kunt u een nieuwe klasse maken die de bestaande klasse uitbreidt. Dit wordt klassieke overerving genoemd.

JavaScript maakt geen gebruik van klassieke overerving. In plaats daarvan gebruikt het prototypische overerving.

In prototypische overerving “erft” een object eigenschappen van een ander object via de prototype koppeling.

JavaScript prototypische overerving en __proto__

Laten we een voorbeeld nemen om het concept duidelijker te maken.

Het volgende definieert een person-object:

Code language: JavaScript (javascript)

Het person-object heeft twee eigenschappen:

• name die een string-waarde bevat.
• greet die een waarde bevat die toevallig een functie is. De greet staat bekend als een methode van het person-object.

Standaard biedt JavaScript u een Object()-functie en een prototype-object dat kan worden benaderd via de prototype eigenschap van de Object()-functie:

Wanneer u de object-literale syntaxis gebruikt om een object te definiëren, is het object een instantie van de Object. Daarom geeft de uitdrukking person instanceof Object true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Het person-object koppelt ook aan het Object.prototype via de ]-koppeling.

Met andere woorden, u hebt toegang tot alle eigenschappen van het Object.prototype-object via het person-object. Bijvoorbeeld:

Code language: JavaScript (javascript)

Uitvoer:

Code language: JavaScript (javascript)

De is de standaardconversie van een object naar een string.

Wanneer u de toString() methode oproept op het person object, kan JavaScript het niet vinden. Dus JavaScript volgt de prototype-keten en zoekt naar de methode op het Object.prototype-object. JavaScript kan de methode toString() op het Object.prototype-object vinden en voert deze uit.

Om toegang te krijgen tot het prototype van het person-object, kunt u de __proto__-eigenschap ervan gebruiken:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Het volgende definieert een ander object, teacher genaamd. Het teacher-object heeft de methode teach():

Code language: JavaScript (javascript)

Als u wilt dat het teacher-object toegang heeft tot alle eigenschappen van het person-object, kunt u het prototype van het teacher-object instellen op het person-object:

Code language: JavaScript (javascript)

Merk op dat u de __proto__ nooit in de productiecode moet gebruiken. Dit is alleen voor leer- en begripsdoeleinden.

Nu kan het teacher-object via de prototype-keten toegang krijgen tot de name-eigenschap en greet()-methode van het person-object:

Code language: JavaScript (javascript)

Uitvoer:

Code language: JavaScript (javascript)

Wanneer u de greet()-methode oproept op het teacher-object, vindt JavaScript deze eerst op het teacher-object.

Omdat JavaScript de methode niet kan vinden op het teacher-object, volgt het de prototype-keten en zoekt het naar de methode op het person-object. Deze keer kan JavaScript de methode op het person-object vinden en voert het de greet()-methode uit.

In JavaScript zeggen we dat het teacher-object eigenschappen van het person-object erft. En dit is prototypische overerving.

Een standaardmanier om prototypische overerving te implementeren in ES5

ES5 voorzag in een standaardmanier om met prototypische overerving te werken door de Object.create() methode te gebruiken.

Merk op dat u nu de nieuwere ES6 class en extends sleutelwoorden moet gebruiken om overerving te implementeren. Het is veel eenvoudiger.

De methode Object.create() creëert een nieuw object en gebruikt een bestaand object als prototype van het nieuwe object:

Code language: JavaScript (javascript)

De methode Object.create() accepteert twee argumenten:

• Het eerste argument (proto) is een object dat wordt gebruikt als het prototype voor het nieuwe object.
• Het tweede argument (propertiesObject), indien meegeleverd, is een optioneel object dat aanvullende eigenschappen voor het nieuwe object definieert.

Stel dat u een person-object hebt:

Code language: JavaScript (javascript)

Het volgende creëert een leeg teacher-object met de __proto__ van het person-object:

Code language: JavaScript (javascript)

Daarna kunt u eigenschappen voor het teacher-object definiëren:

Code language: JavaScript (javascript)

Of u kunt al deze stappen als volgt in één verklaring uitvoeren:

Code language: JavaScript (javascript)

ES5 introduceerde ook de methode Object.getPrototypeOf() die het prototype van een object teruggeeft. Bijvoorbeeld:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Summary

• Inheritance staat een object toe om de eigenschappen en methoden van een ander object te gebruiken.
• JavaScript maakt gebruik van prototypische overerving die tot stand komt via prototype linkage.