JavaScript Prototypal Inheritance

Summary: I denne tutorial lærer du, hvordan JavaScript prototypal inheritance fungerer.

Indledning til JavaScript prototypisk arv

Hvis du har arbejdet med andre objektorienterede programmeringssprog såsom Java eller C++, har du været bekendt med arvebegrebet.

I dette programmeringsparadigme er en klasse et blueprint til at skabe objekter. Hvis du ønsker, at en ny klasse skal genbruge funktionaliteten i en eksisterende klasse, kan du oprette en ny klasse, der udvider den eksisterende klasse. Dette kaldes klassisk arv.

JavaScript anvender ikke klassisk arv. I stedet bruger det prototypisk arv.

I prototypisk arv “arver” et objekt egenskaber fra et andet objekt via prototypeforbindelsen.

JavaScript prototypisk arv og __proto__

Lad os tage et eksempel for at gøre begrebet mere klart.

Det følgende definerer et person-objekt:

Code language: JavaScript (javascript)

Det person-objekt har to egenskaber:

• name der indeholder en strengværdi.
• greet der indeholder en værdi, der tilfældigvis er en funktion. greet er kendt som en metode for person-objektet.

Som standard giver JavaScript dig en Object()-funktion og et prototypeobjekt, som du kan få adgang til via prototype-egenskaben for Object()-funktionen:

Når du bruger syntaksen for objektlitteratur til at definere et objekt, er objektet en instans af Object. Derfor returnerer udtrykket person instanceof Object true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Objektet person er også forbundet med Object.prototype via ]-forbindelsen.

Med andre ord kan du få adgang til alle egenskaber i Object.prototype-objektet via person-objektet. Eksempelvis:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Den er standardkonverteringen fra et objekt til streng.

Når du kalder toString()-metoden på person-objektet, kan JavaScript ikke finde det. Så JavaScript følger prototypekæden og søger efter metoden på Object.prototype-objektet Object.prototype. JavaScript kan finde toString()-metoden på Object.prototype-objektet og udfører den.

For at få adgang til prototypen for person-objektet kan du bruge dets __proto__-egenskab:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Det følgende definerer et andet objekt kaldet teacher. teacher-objektet har teach()-metoden:

Hvis du ønsker, at teacher-objektet skal have adgang til alle egenskaberne i person-objektet, kan du indstille prototypen for teacher-objektet til person-objektet:

Code language: JavaScript (javascript)

Bemærk, at du aldrig bør bruge __proto__ i produktionskoden. Dette er kun til lærings- og forståelsesformål.

Nu kan teacher-objektet få adgang til name-egenskaben og greet()-metoden fra person-objektet via prototypekæden:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Når du kalder greet()-metoden på teacher-objektet, finder JavaScript den først på teacher-objektet.

Da JavaScript ikke kan finde metoden på teacher-objektet, følger det prototypekæden og søger efter metoden på person-objektet. Denne gang kan JavaScript finde metoden på person-objektet og udfører greet()-metoden.

I JavaScript siger vi, at teacher-objektet arver egenskaber fra person-objektet. Og det er prototypisk arv.

En standardmetode til at implementere prototypisk arv i ES5

ES5 gav en standardmetode til at arbejde med prototypisk arv ved at bruge Object.create()-metoden.

Bemærk, at du nu skal bruge de nyere ES6-keywords class og extends til at implementere arv. Det er meget enklere.

Metoden Object.create() opretter et nyt objekt og bruger et eksisterende objekt som prototype for det nye objekt:

Code language: JavaScript (javascript)

Metoden Object.create() accepterer to argumenter:

• Det første argument (proto) er et objekt, der bruges som prototype for det nye objekt.
• Det andet argument (propertiesObject), hvis det er angivet, er et valgfrit objekt, der definerer yderligere egenskaber for det nye objekt.

Sæt, at du har et person-objekt:

Code language: JavaScript (javascript)

Det følgende opretter et tomt teacher-objekt med __proto__ af person-objektet:

Code language: JavaScript (javascript)

Derpå kan du definere egenskaber for teacher-objektet:

Code language: JavaScript (javascript)

Og du kan også udføre alle disse trin i én erklæring som følger:

Code language: JavaScript (javascript)

ES5 introducerede også Object.getPrototypeOf()-metoden, der returnerer prototypen for et objekt. For eksempel:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Summary

• Arv giver mulighed for, at et objekt kan bruge egenskaber og metoder fra et andet objekt.
• JavaScript anvender prototypisk arv, der opnås via prototype linkage.