JavaScript Prototypal Inheritance

Sammanfattning: I den här handledningen lär du dig hur JavaScript Prototypal Inheritance fungerar.

Introduktion till JavaScript prototypal inheritance

Om du har arbetat med andra objektorienterade programmeringsspråk som Java eller C++ har du varit bekant med arvskonceptet.

I det här programmeringsparadigmet är en klass en plan för att skapa objekt. Om du vill att en ny klass ska återanvända funktionaliteten hos en befintlig klass kan du skapa en ny klass som förlänger den befintliga klassen. Detta kallas klassisk arv.

JavaScript använder inte klassisk arv. Istället används prototypisk arv.

I prototypisk arv ”ärver” ett objekt egenskaper från ett annat objekt via prototyplänken.

JavaScript prototypisk arv och __proto__

Låt oss ta ett exempel för att göra begreppet mer tydligt.

Följande definierar ett person-objekt:

Code language: JavaScript (javascript)

Objektet person har två egenskaper:

• name som innehåller ett strängvärde.
• greet som innehåller ett värde som råkar vara en funktion. greet kallas en metod för person-objektet.

Som standard ger JavaScript dig en Object()-funktion och ett prototypobjekt som kan nås via prototype-egenskapen för Object()-funktionen:

När du använder syntaxen för objektslitteratur för att definiera ett objekt, är objektet en instans av Object. Därför returnerar uttrycket person instanceof Object true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Objektet person länkar också till Object.prototype via kopplingen ].

Med andra ord kan du få tillgång till alla egenskaper hos Object.prototype-objektet via person-objektet. Till exempel:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

är standardkonverteringen från ett objekt till sträng.

När du anropar toString()-metoden på person-objektet kan JavaScript inte hitta det. Så JavaScript följer prototypkedjan och söker efter metoden på Object.prototype-objektet. JavaScript kan hitta metoden toString() på Object.prototype-objektet och utför den.

För att få tillgång till prototypen för person-objektet kan du använda dess __proto__-egenskap:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Följande definierar ett annat objekt som kallas teacher. teacher-objektet har metoden teach():

Code language: JavaScript (javascript)

Om du vill att teacher-objektet ska få åtkomst till alla egenskaper hos person-objektet kan du ställa in prototypen för teacher-objektet till person-objektet:

Code language: JavaScript (javascript)

Notera att du aldrig bör använda __proto__ i produktionskoden. Detta är bara för inlärning och förståelse.

Nu kan teacher-objektet få tillgång till name-egenskapen och greet()-metoden från person-objektet via prototypkedjan:

Code language: JavaScript (javascript)

Utmatning:

Code language: JavaScript (javascript)

När du anropar greet()-metoden på teacher-objektet hittar JavaScript den först på teacher-objektet.

Då JavaScript inte kan hitta metoden på teacher-objektet följer det prototypkedjan och söker efter metoden på person-objektet. Den här gången kan JavaScript hitta metoden på person-objektet och utför greet()-metoden.

I JavaScript säger vi att teacher-objektet ärver egenskaper från person-objektet. Och detta är prototypiskt arv.

Ett standardsätt att implementera prototypiskt arv i ES5

ES5 tillhandahöll ett standardsätt att arbeta med prototypiskt arv genom att använda Object.create()-metoden.

Notera att du nu bör använda de nyare ES6 class– och extends-nyckelorden för att implementera arv. Det är mycket enklare.

Metoden Object.create() skapar ett nytt objekt och använder ett befintligt objekt som prototyp för det nya objektet:

Code language: JavaScript (javascript)

Metoden Object.create() tar emot två argument:

• Det första argumentet (proto) är ett objekt som används som prototyp för det nya objektet.
• Det andra argumentet (propertiesObject), om det tillhandahålls, är ett valfritt objekt som definierar ytterligare egenskaper för det nya objektet.

Antag att du har ett person-objekt:

Code language: JavaScript (javascript)

Nedan skapas ett tomt teacher-objekt med __proto__ av person-objektet:

Code language: JavaScript (javascript)

Därefter kan du definiera egenskaper för teacher-objektet:

Code language: JavaScript (javascript)

Och du kan göra alla dessa steg i ett enda uttalande enligt följande:

Code language: JavaScript (javascript)

ES5 introducerade också metoden Object.getPrototypeOf() som returnerar prototypen för ett objekt. Till exempel:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Summary

• Arvighet gör det möjligt för ett objekt att använda ett annat objekts egenskaper och metoder.
• JavaScript använder prototypisk arv som uppnås via prototyplänkning.