Ohjelmointitekniikka (JavaScript): periytyminen, prototyypit ja prototyyppiketju

Helsingin yliopisto / tietojenkäsittelytieteen osasto / Ohjelmointitekniikka (JavaScript) / © Arto Wikla 2018

9 Periytyminen, prototyypit ja prototyyppiketju

Muutettu viimeksi 29.11.2018 / Sivu luotu 12.11.2013

Funktio Object

Funktio Function

Prototyyppiketju ja __proto__-kenttä

Oma konstruktorifunktio

Omaa perintää

Aksessoreita ja eläimiä

Parametreja perintäketjussa ylöspäin

instanceof

Object.create ja miksi leijonalla on vain kaksi jalkaa

Niin monimutkaisilta kuin JavaScriptin suoritusaikaiset tietorakenteet ehkä näyttävätkin, oikeastaan kaiken takana on vain kolmenlaisia oliota: funktio-olioita, niihin liittyviä prototyyppiolioita ja "tavallisia" olioita. Kaikilla olioilla – paitsi yhdellä – on oma prototyyppinsä, josta se perii ominaisuuksia. Periytyminen on kuitenkin erilaista kuin luokkapohjaisissa oliokielissä.

Huom: Vaikka olion prototyyppikin on olio, tällä kurssilla käytämme sanaa prototyyppiolio tarkoittamaan vain funktio-olioon liitettyä oliota. Tuon sanan yhteydessä on aina mainittava minkä funktion prototyyppioliosta on kysymys!

Jokaisella funktio-oliolla on siis oma prototyyppiolionsa, joka kuitenkaan EI OLE kyseisen funktion oma prototyyppi – paitsi yhdellä funktiolla: Funktiolla Function prototyyppi ja prototyyppiolio ovat sama asia, koska Function-olio perii funktio-ominaisuutensa juuri omalta prototyyppiolioltaan!

Konstruktorifunktioiden prototyyppiolioista muodostetaan linkitettyjä ketjuja, joista oliot perivät ominaisuuksia. Normaalisti jokaisen olion prototyyppien ketju päättyy Object-funktion prototyyppiolioon.

Kuulostaako monimutkaiselta? Proosatekstin kirjoittaminen aiheesta on aika hankalaa! Kyllä asiat selvenevät, aletaan piirrellä...

Funktio `Object`

JavaScriptin prototyyppiperiytymisen perustana ovat funktio-oliot Object ja Function. Molemmilla ja molempien prototyyppiolioilla on kenttinään eli ominaisuuksinaan joukko kielen peruskalustoa. Ne molemmat ovat myös konstruktorifunktioita eli niiden avulla luodaan uusia olioita ja funktioita.

Object-funktiolla on paljon omia kenttiä. Tässä vähän näytteitä tulostettuna Pienen testiympäristön funktiolla oK(Object):

assign: function assign() {
    [native code]
}
getPrototypeOf: function getPrototypeOf() {
    [native code]
}
setPrototypeOf: function setPrototypeOf() {
    [native code]
}
getOwnPropertyDescriptor: function getOwnPropertyDescriptor() {
    [native code]
}
...
...
seal: function seal() {
    [native code]
}
isSealed: function isSealed() {
    [native code]
}
fromEntries: function fromEntries() {
    [native code]
}
prototype: [object Object]
length: 1
name: Object

Object-olion sisältämät funktiokentät muistuttavat Javan "staattisia luokkametodeita". Niitä ei "sovelleta this-olioon" vaan niitä kutsutaan sellaisinaan – kuten jo aiemmin on nähty:
```
  Object.defineProperty(opiskelija, 'arvo', {writable: true});
```
Samaan tapaan myös itse ohjelmoitaviin konstruktorifunktioihin voidaan ohjelmoida "staattisia" kenttiä ja "luokkametodeita"!
Nimettyjen funktioiden on nimi kentässä name. Kuten nähdään, Object-funktion nimi on kuin onkin Object.

Object-funktion kentässä prototype on linkki funktion prototyyppiolioon. Katsotaan millaisia kenttiä sieltä löytyy, oK(Object.prototype):

toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
toLocaleString: function toLocaleString() {
    [native code]
}
valueOf: function valueOf() {
    [native code]
}
...
...
__lookupGetter__: function __lookupGetter__() {
    [native code]
}
__lookupSetter__: function __lookupSetter__() {
    [native code]
}
__proto__: null
constructor: function Object() {
    [native code]
}

Kaikki oliot perivät Object-funktion prototyyppiolion kentät, funktioarvoiset ja muut, ellei perintää ole itse katkaistu.
Muistutus: kentän arvoa kysyttäessä "ylioloita" käydään tutkimassa, kentälle arvoa asetettaessa ei käydä!
Kuten nähdään, Object-funktion prototyyppiolion __proto__-kenttä on null! Siihen siis päättyvät kaikki prototyyppiketjut ellei periytymisrakennetta itse muuteta.
Object-funktion prototyyppioliossa on viite, tuo kenttä constructor, takaisin Object-funktioon, konstruktoriin, joka osaa Object-oliota luoda.
On siis true että Object.prototype.constructor===Object.
Vastaava "takaisinkytkentä" löytyy jokaisen funktion prototyyppioliosta!
Object-funktioon liitetyn prototyyppiolion operaatiot muistuttavat Javan aksessorimetodeita; niitä siis "sovelletaan this-olioon" kuten pitäisi olla tuttua kaikille olio-ohjelmoijille:
```
   kissantassu.toString()
```

Funktio `Function`

Tutkitaan sitten samaan tapaan konstruktoria Function. Kutsu oK(Function) antaa:

prototype: function () {
}
length: 1
name: Function

Ikäänkuin kurssin symbolikuva ei pitäisikään paikkaansa... Ihan kuin Function.prototype-kentässä olisi vain pelkkä tyhjä funktio eikä mitään kivaa oliota kaikkine funktio-ominaisuuksineen...

Onneksi MDN antaa hieman lohtua: MDN: Function.prototype.toString: "The Function object overrides the toString method inherited from Object; it does not inherit Object.prototype.toString. For Function objects, the toString method returns a string representation of the object in the form of a function declaration. That is, toString decompiles the function, and the string returned includes the function keyword, the argument list, curly braces, and the source of the function body."

Taitaakin olla kyse funktioiden ikiomasta toString-funktiosta, joka peittää näkyvistä Objectilta perityn. Kokeillaan mitä Objectin toString kertoo oliosta Function:

 write(Object.toString.call(Function) )  // function Function() {
                                         //     [native code]
                                         // }

Ja tuolta "natiivikoodista" sitten kaikki tarpeellinen varmaan löytyykin...;-)
On helppo varmistua, että kyllä sieltä Function.prototype-kentästä löytyy muutakin kuin vain tyhjä funktio. Seuraavat ovat totta
Function.prototype.constructor===Function Function.prototype.__proto__===Object.prototype Function.prototype===Function.__proto__
Tuosta __proto__-kentästä kohta lisää.

oK(Function.prototype) löytää seuraavat kentät:

toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
apply: function apply() {
    [native code]
}
call: function call() {
    [native code]
}
bind: function bind() {
    [native code]
}
isGenerator: function isGenerator() {
    [native code]
}
arguments: null
caller: null
constructor: function Function() {
    [native code]
}
length: 0
name:

Kaikki funktio-oliot siis perivät nämä kentät.

Prototyyppiketju ja `proto`-kenttä

Jokaisella oliolla on yksi ja vain yksi ominaisuus eli kenttä "minun prototyyppini". Jos niitä olisi useita, kielessä olisi olioden moniperintä!
Tuon ominaisuuden arvon, linkin olion prototyyppiin, saa "luokkametodilla" Object.getPrototypeOf:
```
var x = {a:1}
oK(Object.getPrototypeOf(x))
```
Tuloksena saadaan Object-konstruktorifunktion prototyyppiolio Kyseessä on siis olio, johon Object.prototype-kenttä viittaa:
```
toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
...
...
__proto__: null
constructor: function Object() {
    [native code]
}
```
Tämä on juuri se olio, johon muiden olioiden prototyyppiketjut päättyvät (ellei niitä ole itse katkaistu).
Lisäksi – kuten arvata saattaa:
```
var x = {a:1}
write(Object.getPrototypeOf(x)===x.__proto__)  // true!
```
Kun olion x kenttään viitataan arvoa kysellen, ensin etsitään olion omista kentistä. Ellei löydy, tutkitaan olion Object.getPrototypeOf(x) kentät. Ellei niistäkään löydy haettua, tutkitaan olio Object.getPrototypeOf(Object.getPrototypeOf(x)), jne. Näin voidaan edetä aina Object.prototype-kentän osoittamaan olioon eli Object-funktion prototyyppiolioon saakka.
Siihen ketju päättyy: Object.getPrototypeOf(Object.prototype)===null. Jos kentän arvoa haettaessa päästään ketjun loppuun haettua kenttää löytämättä, palautetaan arvo undefined.
Prototyyppiketjun käsittelyn "virallinen väline" on tämä Object.getPrototypeOf-funktio, mutta varsinkin kielen perusrakenteeseen tutustuttaessa olioiden prototyyppiketjun kenttien käyttäminen sellaisinaan helpottaa oleellisesti prototyyppiketjujen tarkastelua.
Jokaisella oliolla on kenttä oman prototyyppiketjun lähimpään prototyyppiin. Kentän nimi on __proto__ (kaksi alaviivaa alussa ja lopussa). Edelliset esimerkit voidaan siis kirjoittaa (mielestäni) paljon selkeämmin __proto__-kenttien avulla:
```
var x = {a:1}

oK(Object.getPrototypeOf(x))
ok(x.__proto__) 

Object.getPrototypeOf(Object.prototype)===null
Object.prototype.__proto__===null
```
Huom: Useimmat selaimet nykyään tunnistavat __proto__-kentän. Kuitenkin vasta ECMAScript 6 -spesifikaatiossa siitä tuli kielen virallinen ominaisuus. Koska vastaan voi tulla __proto__-taidottomia selaimia, toistaiseksi varsinaisia sovelluksia toteutettaessa voi olla vieläkin syytä alistua Object.getPrototypeOf-funktion käyttöön. Kielen syvärakenteeseen tutustuttaessa __proto__-kentän tutkiminen on kuitenkin paljon selkeämpää, suorastaan kullanarvoista! ;-)

Oma konstruktorifunktio

Ohjelmoidaan oma konstruktorifunktio ja luodaan sillä pari oliota:
```
function F() {this.a=2}
var x = new F()
var y = new F()
```
Tutkitaan, millaisia linkityssuhteita olioiden välille muodostuu. Luettelossa on ensin yksi tai useampi tosi (true) väite ja sitten selitys:
- F.__proto__===Function.prototype
  F.__proto__.__proto__===Object.prototype
  F.__proto__.__proto__.__proto__===null
  
  Tämä on siis oman konstruktorifunktion F prototyyppiketju. F perii yleiset funktio-ominaisuutensa Function-funktion prototyyppioliolta ja sen jälkeen yleiset olio-ominaisuutensa Object-funktion prototyyppioliolta.
- F.prototype.__proto__===Object.prototype
  F.prototype.constructor===F
  
  F-funktion prototype-kentän viittaaman F-funktion prototyyppiolion prototyyppi on siis Object.prototype-kentän viittaama Object-funktion prototyyppiolio. Kyseessä on siis "tavallinen" olio, ei funktio-olio.
  Funktion F.prototype-kentän viittaamassa prototyyppioliossa on kenttä constructor, joka viittaa suoraan takaisin omaan funktio-olioonsa F. Näin ovat asiat kaikilla funktoilla, ellei linkitystä itse muuteta.
- Lisää totuuksia:
  x.__proto__===F.prototype
  y.__proto__===F.prototype
  x.__proto__===y.__proto__
  Olioiden x ja y prototyyppiketjun ensimmäinen prototyyppiolio on yhteinen, F.prototype-olio. Molemmilla on oma versionsa kentästä a. Muut ominaisuutensa ne perivät ketjusta F.prototype —> Object.prototype —> null.
Syntynyt rakenne on siis seuraavanlainen:

Omaa perintää

Ohjelmoidaan sitten konstruktorifunktio Yli ja sille "alikonstruktori" Ali. Ja eikun vain luomaan uusia Ali-olioita...

function Yli() {this.a=2} 

function Ali() {this.b=3}
Ali.prototype = new Yli()   // tällä tekniikalla konstruktoriin
                            // liitetään "ylikonstruktori"
var x = new Ali()
var y = new Ali()

x.a = 77

Yli-funktion linkitys on tuttu jo edellisestä esimerkistä. Tutkitaan uutuuksia:
- Ali.__proto__===Function.prototype
  Ali perii funktio-ominaisuutensa tutusta paikasta Function.prototype-oliosta.
- Seuraavat ovat true:
  Ali.prototype.constructor===Yli // kenttä constructor löytyy linkin päästä!
  Ali.prototype.hasOwnProperty("constructor")===false
  - Ali-funktiolle luodaan ensin oma prototyyppiolio kentän prototype arvoksi – aivan kuten kaikille luotaville funktioille.
  - Tuo olioraukka kuitenkin korvataan saman tien uudella arvolla:
    Ali.prototype=new Yli().
    Ja roskienkerääjä kyllä "pitää huolen" tuosta hyljätystä oliosta... ;-)
  - Operaatio new Yli() luo siis vain "tavallisen" olion, ei funktioon liittyvää "erikoisoliota", jolla on constructor-kenttä.
  - Haettaessa kenttää constructor oliosta Ali.prototype, sitä ei sieltä löydy; edetään siis tuttuun tapaan prototyyppikejua eteenpäin __proto__-linkkejä pitkin. Haettu kenttä löytyy Yli-funktion prototyyppioliosta!
  - Operaatiolla Ali.prototype.hasOwnProperty("constructor") todetaan, ettei Ali.prototype-oliosta itsestään löydy tuota kenttää.
- Lisää totuuksia:
  Ali.prototype.__proto__===Yli.prototype
  Ali.prototype.__proto__.__proto__===Object.prototype
  Ali-olion prototype-kentän viittaaman olion prototyyppiketju on siis: Yli.prototype —> Object.prototype —> null.
- Muuttujien x ja y arvoksi luodaan Ali-oliot. Kumpikin saa oman versionsa kentästä b, jonka Ali-konstruktori luo lauseella this.b=3.
- Kentän a oliot x ja y aluksi jakavat. Jos kentän arvoa vain kysellään, kenttä käydään löytämässä prototyyppiketjusta. Mutta jos kenttään asetetaan arvo, ketjua ei tutkitakaan vaan luodaan oliolle ikioma kenttä
- Olioiden x ja y prototyyppiketju on: Ali.prototype —> Yli.prototype —> Object.prototype —> null.
Tällainen rakenne ohjelmasta syntyy (syntymä simuloidaan luennolla):

Esimerkkinä pidempi ketju:

function Yli() {this.a=2} 

function Ali() {this.b=3}
Ali.prototype = new Yli() 

function AliAli() {this.c=4}
AliAli.prototype = new Ali()

var x = new AliAli()

kK(x)   // kaikki kentät, omat ja perityt

Tulostus:

--------
c: 4
--------
b: 3
--------
a: 2
--------
constructor: function Yli() {this.a=2}
--------
toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
...
...
__proto__: null
constructor: function Object() {
    [native code]
}

[ ....... Tästä kuvasimulaatio luennolla! ....... ]

Aksessoreita ja eläimiä

Periytymishierarkiassa funktioiden prototyyppiolioihin voidaan liittää kenttien lisäksi aksessorimetodeita. Jos peritty aksessori asettaa arvon perittyyn kenttään, this viittaa perineeseen olioon. Jos perineellä olioilla ei vielä ole omaa versiota peritystä kentästä, sellainen luodaan – arvoa sijoitettaessa ei edetä pitkin prototyyppiketjua, kuten jo aiemmin nähtiin. (Vain arvoa kysyttäessä etsitään tarvittaessa ketjusta.)

function Elain() {
  this.paino = 0
}
Elain.prototype.asetaPaino =
   function (maara) {this.paino=maara}
Elain.prototype.syo =
   function (maara) {this.paino+=maara}
Elain.prototype.kuluta =
   function (maara) {this.paino-=maara}

function Tuotantoelain() {
  this.tuotto = 0
}
Tuotantoelain.prototype = new Elain()
Tuotantoelain.prototype.asetaTuotto =
   function (maara) {this.tuotto=maara}
Tuotantoelain.prototype.tuota =
   function () {return this.tuotto}

function Lehma(nimi) {
  this.nimi = nimi || "nimetön";   // kelvoton nimi => oletusarvoksi
}                               //  (tämä on JavaScript-idiomi!)
Lehma.prototype = new Tuotantoelain()
Lehma.prototype.toString =
   function () { return this.nimi+
                 ": "+this.paino+" Kg, "+
                  this.tuotto+" litraa"
               }

var m = new Lehma("Mansikki")

oK(m)                         // nimi: Mansikki  (vain yksi oma kenttä!)

write(m)                      // Mansikki: 0 Kg, 0 litraa

m.asetaPaino(500)
oK(m)                          // nimi: Mansikki (kaksi omaa kenttää)
                               // paino: 500     

write(m)                       // Mansikki: 500 Kg, 0 litraa

m.asetaTuotto(20)
m.syo(15)
oK(m)                          // nimi: Mansikki (kolme omaa kenttää)
                               // paino: 515
                               // tuotto: 20

write(m)                       // Mansikki: 515 Kg, 20 litraa

m.kuluta(100)
write(m)                       // Mansikki: 415 Kg, 20 litraa
write("Tuotetaan "+m.tuota())  // Tuotetaan 20

Kuvan piirtäminen jätetään harjoitustehtäväksi!

Tältä näyttää kK(m) kaiken tämän jälkeen:

--------
nimi: Mansikki
paino: 415
tuotto: 20
--------
tuotto: 0
toString: function () { return this.nimi+
                        ": "+this.paino+" Kg, "+
                        this.tuotto+" litraa"
                      }
--------
paino: 0
asetaTuotto: function (maara) {this.tuotto=maara}
tuota: function () {return this.tuotto}
--------
constructor: function Elain() {
  this.paino = 0
}
asetaPaino: function (maara) {this.paino=maara}
syo: function (maara) {this.paino+=maara}
kuluta: function (maara) {this.paino-=maara}
--------
toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
...
__proto__: null
constructor: function Object() {
    [native code]
}
//... siis taas vanha tuttu Object.prototype
//    eli Object-funktion prototyyppiolio

Parametreja perintäketjussa ylöspäin

Edellisessä esimerkissä perittyjen kenttien alkuarvon asettamiseen oli ohjelmoitu aksessorit asetaPaino ja asetaTuotto. On myös mahdollista välittää parametreja konstruktorilta toiselle. (Mikäpä JavaScriptissä ei olisi mahdollista? ;-)
Konstruktori voi liittää luomaansa olioon kentän, johon asetetaan linkki konstruktorin "ylikonstruktoriin". Kentän nimi voi (leikkisästi?) olla vaikkapa tuo eräästä toisesta yhteydestä niin kovin tuttu super! Ja kun olioita luodaan, this this tarkoittaa koko ketjussa "juuri nyt kyseessä olevaa oliota".

function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
Elain.prototype.syo =
   function (maara) {this.paino+=maara}
Elain.prototype.kuluta =
   function (maara) {this.paino-=maara}

function Tuotantoelain(kg, litr) {
  this.super = Elain
  this.super(kg)
  this.tuotto = litr || 0;  // kelvoton tuotto => nollaksi
}
Tuotantoelain.prototype = new Elain()
Tuotantoelain.prototype.tuota =
   function () {return this.tuotto}

function Lehma(nimi, kg, litr) {
  this.super = Tuotantoelain
  this.super(kg,litr)
  this.nimi = nimi || "nimetön";  // kelvoton nimi => oletusarvoksi
}
Lehma.prototype = new Tuotantoelain()
Lehma.prototype.toString =
   function () { return this.nimi+
                 ": "+this.paino+" Kg, "+
                  this.tuotto+" litraa"
               }

var m = new Lehma("Mansikki", 500, 12)
write(m)           // Mansikki: 500 Kg, 12 litraa
kK(m)

Tutkitaan prototyyppiketjua välineellä kK(m) (lisään tulosteeseen olioiden nimet):

-------- m -------------------------------
super: function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
paino: 500
tuotto: 12
nimi: Mansikki

-------- Lehma.prototype -----------------
super: function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
paino: 0
tuotto: 0
toString: function () { return this.nimi+
                 ": "+this.paino+" Kg, "+
                  this.tuotto+" litraa"
               }

-------- Tuotantoelain.prototype ----------
paino: 0
tuota: function () {return this.tuotto}

-------- Elain.prototype ------------------
constructor: function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
syo: function (maara) {this.paino+=maara}
kuluta: function (maara) {this.paino-=maara}

-------- Object.prototype -----------------
toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
...
__proto__: null
constructor: function Object() {
    [native code]
}
//... siis taas vanha tuttu Object.prototype
//    eli Object-funktion prototyyppiolio

Kuvan piirtäminen jätetään "harjoitustehtäväksi"... ;-)
Selitys sille, miksi kaikilla m:llä ja Lehma.prototype olioilla on myös super: function Elain(kg) eikä esimerkiksi super: function Tuotantoelain(kg, litr): Tässä peritymismekanismissa luodaan ensin konstruktorille oma prototyyppiolio kenttään prototype, mutta sitten se korvataan sijoittamalla prototyyppikenttään "new 'Yliolio'(...)"!
(26.11.2015 (!)): Itse asiassa tämä tekniikka ei välttämättä ole kovin hyvä, vaikka onkin kotoisin enemmän tai vähemmän "virallisilta" sivuilta! Siinä syntyy turhia kenttiä joita joudutaan päivittelemään vähän väliä!

(Konstruktori-)funktioita voidaan kutsua myös suoraan nimellä käyttämällä systeemin call-funktoita. Tällöin mitään viitettä "yliolion" konstruktoriin ei tarvitse tallettaa "aliolion" kenttään

function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
Elain.prototype.syo =
   function (maara) {this.paino+=maara}
Elain.prototype.kuluta =
   function (maara) {this.paino-=maara}

function Tuotantoelain(kg, litr) {
  Elain.call(this,kg)
  this.tuotto = litr || 0;  // kelvoton tuotto => nollaksi
}
Tuotantoelain.prototype = new Elain()
Tuotantoelain.prototype.tuota =
   function () {return this.tuotto}

function Lehma(nimi, kg, litr) {
  Tuotantoelain.call(this,kg,litr)
  this.nimi = nimi || "nimetön";  // kelvoton nimi => oletusarvoksi
}
Lehma.prototype = new Tuotantoelain()
Lehma.prototype.toString =
   function () { return this.nimi+
                 ": "+this.paino+" Kg, "+
                  this.tuotto+" litraa"
               }

var m = new Lehma("Mansikki", 500, 12)
write(m)           // Mansikki: 500 Kg, 12 litraa
kK(m)

Tällöin myös prototyyppiketjun prototyypit yksinkertaistuvat, kun mitään super-kenttää ei tarvita:

--------
paino: 500
tuotto: 12
nimi: Mansikki
--------
paino: 0
tuotto: 0
toString: function () { return this.nimi+
                        ": "+this.paino+" Kg, "+
                        this.tuotto+" litraa"
               }
--------
paino: 0
tuota: function () {return this.tuotto}
--------
constructor: function Elain(kg) {
  this.paino = kg || 0;  // kelvoton paino => nollaksi
}
syo: function (maara) {this.paino+=maara}
kuluta: function (maara) {this.paino-=maara}
--------
toSource: function toSource() {
    [native code]
}
toString: function toString() {
    [native code]
}
...
__proto__: null
constructor: function Object() {
    [native code]
}
//... siis taas vanha tuttu Object.prototype
//    eli Object-funktion prototyyppiolio

Tämä tapa on paljon selkeämpi!

`instanceof`

Operaatiolla instanceof voi tutkia olion prototyyppiketjuun osoittavia konstruktorifunktioita. Tämä jollain tavoin vastaa vahvasti tyypitettyjen luokkapohjaisten oliokielten ominaisuutta: "aliluokan ilmentymä on myös kaikkien tuon aliluokan yliluokkien tyyppiä". Mutta muistetaan nyt kuitenkin JavaScriptin erilaisuus...

Seuraavat kaikki ovat true edellisissä esimerkeissä:

m instanceof Lehma
m instanceof Tuotantoelain
m instanceof Elain
m instanceof Object

Selitys:

m.__proto__ —> Lehma.prototype 
Lehma.prototype.__proto__ —> Tuotantoelain.prototype
Tuotantoelain.prototype.__proto__ —> Elain.prototype
Elain.prototype.__proto__ —> Object.prototype
Object.prototype.__proto__ —> null

`Object.create` ja miksi leijonalla on vain kaksi jalkaa

Object.create ei ole (mielestäni, AW 29.11.2018) kovinkaan järkevä! Ks. esimerkki alempana kuvan jälkeen!

Edellä kuvattua tapaa luoda olioita on moitittu siitä, että kyseessä ei ole aito ja puhdas prototyyppien käyttö uusien olioiden luonnissa. JavaScriptin versioon 1.8.5 ja ECMAScriptin 5. editioon lisättiin funktio Object.create, jolla olio pitäisi voida luoda kloonaamalla suoraan toisesta oliosta, "aidosta prototyypistä".

(Luulin aluksi, että Object.create luo ihan "aitoja klooneja". Huomasin erehtyneeni. Enkä ole ainoa; mm. verkosta löytyi paljon erehtyneitä.)

Luodaan olio ja käytetään sitä prototyyppinä toisille olioille:

var x = {a:1}
var y = Object.create(x)
var z = Object.create(x)
y.a=3
x.a=666

write(x.a)  // 666
write(y.a)  // 3
write(z.a)  // 666 (!)

Tässä siis kentän x.a muutos muutti myös kentän z.a arvon. Miksi näin kävi? Piirrä tilanne, niin selviää.

Vihje varusfunktion oloemassaolon varmistamiseen:
create-funktio on tietääkseni alunperin Douglas Crockfordin idea, ks.hänen artikkelinsa
Prototypal Inheritance in JavaScript. Hän esitti sen lisättäväksi ohjelmaan muodossa, jossa mahdollisesti jo varusfunktiona toteutettua Object.create-funktiota ei korvata:
```
if (typeof Object.create !== 'function') { // jos ei ole, lisätään
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
```
Vastaavalla tekniikalla voidaan pyrkiä varmistamaan että jossain vanhassa selaimessakin on käytettävissä funktio, jota oma sovellus käyttää!
Oletetaan siis, että Object.create toteuttaa tämän operaation näin (oletukselle on kokeellisia perusteita):
```
Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
```
ja tutkitaan, mitä äskeisessä esimerkissä tapahtuu.
Näin käy, kun muuttujaa x pitää tavallisena oliona ja asettaa sen kentälle arvon. Kun muuttujan z asettamattoman kentän a arvoa kysytään, sitä haetaan prototyypistä ja sieltähän se löytyy.

Huom: Täsmälleen saman rakenteen saa aikaan huomattavasti vaivattomammin seuraavasti:

var x = {a:1}
var y = {}
y.__proto__=x
var z = {}
z.__proto__=x

y.a=3
x.a=666

write(x.a)  // 666
write(y.a)  // 3
write(z.a)  // 666 (!)

Jotain vähän vastaavaa – kentän arvon yllättävä muutos – saadaan aikaan JavaScriptin "perustyylissäkin" muokkaamalla konstruktorifunktion prototyyppiä:
```
function Yli() {this.a=2}

function Ali() {this.b=3}
Ali.prototype = new Yli()

var x = new Ali()
var y = new Ali()

write(x.a)            // 2
Ali.prototype.a=666
write(x.a)            // 666
```
Tällaista ohjelmoija tuskin kuitenkaan tekee vahingossa!
Vaikka muistaisikin olla muokkaamatta "mallioliota" ja muistin tueksi kirjoittaisi sen isolla alkukirjaimella, huonosti voi käydä silloinkin (verkosta löytynyt kaunis esimerkki):
```
var Animal = { traits: {} }

var lion = Object.create(Animal);
lion.traits.legs = 4;

var bird = Object.create(Animal);
bird.traits.legs = 2;

write(lion.traits.legs) // 2
```
Koska lion- ja bird olioista ei löydy traits-kenttää – ja koska tuolle kentälle ei olla asettamassa arvoa – prototyyppiketjussa edetään päivittämään ja katselemaan Animal-olion traits-kenttää!

Perinnetyylillä tällaista ongelmaa ei tule:

function Animal() {this.traits = {} }

var lion = new Animal();
lion.traits.legs = 4;

var bird = new Animal();
bird.traits.legs = 2;

write(lion.traits.legs) // 4

by WebCounter
(19.11.2013)