JavaScript Prototypal Inheritance

Yhteenveto: Tässä opetusohjelmassa opit, miten JavaScriptin prototyyppiperintö toimii.

Esittely JavaScriptin prototyyppiperintöön

Jos olet työskennellyt muilla oliopohjaisilla ohjelmointikielillä, kuten Javalla tai C++:lla, perintökonsepti on sinulle tuttu.

Tässä ohjelmointiparadigmassa luokka on suunnitelma objektien luomista varten. Jos haluat, että uusi luokka käyttää uudelleen olemassa olevan luokan toiminnallisuutta, voit luoda uuden luokan, joka laajentaa olemassa olevaa luokkaa. Tätä kutsutaan klassiseksi periytymiseksi.

JavaScript ei käytä klassista periytymistä. Sen sijaan se käyttää prototyyppiperintöä.

Prototyyppiperinnössä objekti ”perii” ominaisuuksia toiselta objektilta prototyyppilinkityksen kautta.

JavaScriptin prototyyppiperintö ja __proto__

Katsotaanpa esimerkki käsitteen selventämiseksi.

Seuraavassa määritellään person-objekti:

Code language: JavaScript (javascript)

Objektilla person on kaksi ominaisuutta:

• name joka pitää sisällään merkkijonon arvon.
• greet joka pitää sisällään arvon, joka sattuu olemaan funktio. greet tunnetaan person-objektin metodina.

Oletusarvoisesti JavaScript tarjoaa sinulle Object()-funktion ja prototyyppiobjektin, johon pääsee käsiksi Object()-funktion prototype-ominaisuuden prototype kautta:

Kun määrittelet objektin objekti-literaali-syntaksilla, objekti on Object:n instanssi. Siksi lauseke person instanceof Object palauttaa true:

Code language: JavaScript (javascript)

Tulos:

Code language: JavaScript (javascript)

Objekti person linkittyy myös Object.prototype-objektiin ]-linkityksen kautta.

Muilla sanoilla voit käyttää kaikkia Object.prototype-objektin ominaisuuksia person-objektin kautta. Esimerkiksi:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

on oletusarvoinen muunnos objektista merkkijonoksi.

Kun kutsut toString()-metodia person-objektille, JavaScript ei löydä sitä. Niinpä JavaScript seuraa prototyyppiketjua ja etsii metodia Object.prototype-objektista. JavaScript löytää toString()-metodin Object.prototype-objektista ja suorittaa sen.

Käyttääksesi person-objektin prototyyppiä voit käyttää sen __proto__-ominaisuutta:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Seuraavassa määritellään toinen objekti nimeltä teacher. Objektilla teacher on metodi teach():

Code language: JavaScript (javascript)

Jos haluat, että teacher-objekti käyttää kaikkia person-objektin ominaisuuksia, voit asettaa teacher-objektin prototyypiksi person-objektin:

Code language: JavaScript (javascript)

Huomaa, että __proto__ ei saa koskaan käyttää tuotantokoodissa. Tämä on vain oppimista ja ymmärtämistä varten.

Nyt teacher-objekti voi käyttää person-objektin name-ominaisuutta ja greet()-metodia person-objektin prototyyppiketjun kautta:

Code language: JavaScript (javascript)

Tulos:

Code language: JavaScript (javascript)

Kun kutsut greet()-metodia teacher-objektissa, JavaScript löytää sen ensin teacher-objektista.

Koska JavaScript ei löydä metodia teacher-objektista, se seuraa prototyyppiketjua ja etsii metodia person-objektista. Tällä kertaa JavaScript löytää metodin person-objektista ja suorittaa greet()-metodin.

Javaskriptissa sanotaan, että teacher-objekti perii person-objektin ominaisuuksia. Ja tämä on prototyyppiperintöä.

Standarditapa toteuttaa prototyyppiperintöä ES5:ssä

ES5 tarjosi standarditavan työskennellä prototyyppiperinnön kanssa käyttämällä Object.create()-metodia.

Huomaa, että nyt sinun pitäisi käyttää uudempia ES6:n class– ja extends-avainsanoja perinnän toteuttamiseen. Se on paljon yksinkertaisempaa.

Metodi Object.create() luo uuden objektin ja käyttää olemassa olevaa objektia uuden objektin prototyyppinä:

Code language: JavaScript (javascript)

Metodi Object.create() hyväksyy kaksi argumenttia:

• Ensimmäinen argumentti (proto) on uuden objektin prototyyppinä käytettävä objekti.
• Toinen argumentti (propertiesObject), jos se annetaan, on valinnainen objekti, joka määrittelee uuden objektin lisäominaisuuksia.

Esitetään, että sinulla on person-objekti:

Code language: JavaScript (javascript)

Seuraavassa luodaan tyhjä teacher-objekti, jolla on __proto__ person-objektin __proto__:

Code language: JavaScript (javascript)

Sen jälkeen voit määritellä teacher-objektin ominaisuuksia:

Code language: JavaScript (javascript)

Tai voit tehdä kaikki nämä vaiheet yhdellä lausekkeella seuraavasti:

Code language: JavaScript (javascript)

ES5 esitteli myös Object.getPrototypeOf()-metodin, joka palauttaa objektin prototyypin. Esimerkiksi:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Yhteenveto

• Perimän avulla yksi objekti voi käyttää toisen objektin ominaisuuksia ja metodeja.
• JavaScript käyttää prototyyppiperintöä, joka saavutetaan prototyyppilinkityksen avulla.