7 Oliot

• Olio
• Konstruktorifunktio
• JavaScriptin "luokka" eli class-määrittely
• Kenttiin viittaminen ja kenttänimien syntaksi
• Attribuuttien läpikäynti
• Getterit ja setterit
• this, bind, call ja apply

Olio

• Tuttuun tapaan olioilla on kenttiä eli attribuutteja, jotka muodostuvat tunnuksesta ja tunnuksen tarkoittamasta asiasta, tietokentästä tai metodista. JavaScriptissä näitä attribuutteja kutsutaan usein ominaisuuksiksi (property). Taidan silti tyytyä "attribuuttiin" ja "kenttään", jotta voin tarvittaessa puhua vaikkapa "kenttien ominaisuuksista". :-)

• Olio on yksinkertaisesti assosiaatiotaulukko, joukko pareja avain-arvo. Avaimet ovat yksikäsitteisiä ja kuhunkin avaimeen liittyy arvo, joka voi olla tietokenttä, funktio, olio, ... (Yleisempi nimi tällaiselle tietorakenteelle on assosiaatiolista. Sellainen voidaan toteuttaa monella tavalla, mutta arvelen (sic!), että JavaScript-toteutuksissa kyseessä on taulukko... Ei sen tosin välttämättä tarvise olla...)

• Aiemmissa esimerkeissä on jo nähty, miten olioita luodaan kirjoittamalla olioliteraali ohjelmatekstiin. JavaScript-jargonissa tätä ilmausta kutsutaan nimellä object initializer:

  let retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  write(retki.nopeus());  // 75
  

• Toki aksessori voidaan kirjoittaa myös uudemmalla tyylillä:
  nopeus: () => this.matka/this.aika

• Huom: Olion aksessorin viitatessa olion kenttään, viite "tähän olioon", this, todellakin tarvitaan:

  let matka=20, aika=10
  let retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return matka/aika}
    }
  write(retki.nopeus());  // 2 !!
  

• Pienen testiympäristön erikoisvälineillä voi tutkia olion kenttiä ja kenttien sisältöjä (oK(o) luettelee olion omat kentät, kK(o) luettelee sekä olion omat että sen perimät kentät):

  let retki =
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  oK(retki)
  

  tulostaa:

  matka: 150
  aika: 2
  nopeus: function () {return this.matka/this.aika}
  --------
  

• Jos kutsutaan kK(retki), saadaan tulos:

  --------
  matka: 150
  aika: 2
  nopeus: function() {return this.matka/this.aika}
  --------
  toSource: function toSource() {
      [native code]
  }
  toString: function toString() {
      [native code]
  }
  toLocaleString: function toLocaleString() {
      [native code]
  }
  valueOf: function valueOf() {
      [native code]
  }
  ...
  ... paljon, paljon muita kenttiä
  ...
  __lookupGetter__: function __lookupGetter__() {
      [native code]
  }
  __lookupSetter__: function __lookupSetter__() {
      [native code]
  }
  __proto__: null
  constructor: function Object() {
      [native code]
  }
  

  Tästä nähdään, miten olio retki perii Object-funktion ns. prototyyppiolion. Se siis saa olioiden yhteiset ominaisuudet tuolta "ylioliolta", omalta prototyypiltään. Lupaan että asiaan palataan! ;-)

  [ .......Tästä tilanteesta piirretään kuvasimulaatio luennolla! ....... ]

• Jos vaikka kutsutaan write(retki.toString()), tuo metodi löytyy "ylioliosta". Oletustulostusasu on tosin aika tylsä: [object Object].

• Koska olioihin voi dynaamisesti lisätä kenttiä, samanlainen olio voidaan rakentaa näinkin:

  let retki = new Object();
  retki.matka = 150;
  retki.aika = 2;
  retki.nopeus = function() {return this.matka/this.aika}
  write(retki.nopeus());  // 75
  

• Kenttien dynaamisen lisäämisen mahdollisuudesta seuraa myös ilmeinen virhemahdollisuus: kirjoitusvirhe kenttänimessä arvoa sijoitettaessa johtaa uuden kentän lisäämiseen olioon:

  let retki =
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  retki.metka = 666
  oK(retki)
  

  Tulostus:

  matka: 150
  aika: 2
  nopeus: function () {return this.matka/this.aika}
  metka: 666
  --------
  

• Jos yritetään kysyä olemattoman kentän kentän arvoa – sellaisen, jota ei ole myöskään peritty – saadaan arvo undefined:

  let retki =
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  write(retki.pituus)  // undefined
  

• Olioista voi dynaamisesti myös poistaa kenttiä:

  let retki =
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  delete retki.aika;
  oK(retki)
  write(retki.aika)
  write(retki.nopeus())
  

  Tulostus:

  matka: 150
  nopeus: function () {return this.matka/this.aika}
  --------
  undefined
  NaN
  

• JavaScriptissä siis olion kentät ovat julkisia! Mitään private-määrettä Javan tapaan ei ole (vielä!). (Mutta sulkeumien avulla voi luoda piilotettuja kenttiä kuten jo edellä nähtiin. Niistä kuullaan lisää myös myöhemmin.)

  let retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  write(retki.matka);  // 150
  retki.aika = -3.14;
  write(retki.aika);          // -3.14
  write(retki.nopeus())       // -47.77070063694267
  
  retki.nopeus=function() {return 666}
  write(retki.nopeus()) // 666
  

• Kielen peruskalustoon kuuluviin olioihin voidaan lisätä omia kenttiä!

  Jos vaikkapa Object-funktion prototyyppiolioon, johon osoittaa kenttä Object.prototype, lisätään vaikkapa jokin uusi taito, kaikki oliot perivät tuon taidon! (Prototyypeistä puhutaan enemmän seuraavissa luvuissa. Nyt kiinnostavaa on se, että jopa tuo mitä perustavanlaatuisin Object.prototype on julkinen ja muunnettava kenttä siinä missä mikä tahansa muukin kenttä!)

  let retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  
  Object.prototype.boo = function() {write("BÖÖ!")};
  
  retki.boo();        // BÖÖ!
  
  var d = new Date();
  d.boo();            // BÖÖ!
  Function.boo()      // BÖÖ!
  Object.boo()        // BÖÖ!
  

  Tässä kohdassa ehkä kannattaa vähän säikähtää!

• Peruskaluston oletusominaisuuksia voidaan myös korvata omilla versioilla!

  Esimerkiksi kaikkien olioiden, funktioden ja taulukoiden tulostusasu (so. toString-metodi) voidaan korvata omalla (paremmalla?) versiolla:

  let retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  
  Object.prototype.toString = () => "BÖÖ!"
  Function.prototype.toString = () => "HEISSAN!"
  Array.prototype.toString = () => "HÖLÖKYNKÖLÖKYN"
  
  write(retki)        // BÖÖ!
  write(retki.nopeus) // HEISSAN!
  
  write({a:1,b:2})    // BÖÖ!
  write(x=>x*x)       // HEISSAN!
  write([1,2,3])      // HÖLÖKYNKÖLÖKYN
  

  Nyt sitten kannattaa säikähtää ihan tosissaan!

Konstruktorifunktio

JavaScriptin "luokka" eli class-määrittely

• ECMAScript 6 esitteli class-rakenteen, joka ns. syntaktista sokeria jo edellä opitulle konstruktorifunktiotekniikalle.

  Esimerkiksi edellä nähty "vanhan tyylin" ohjelma

  function Matkailu(matka,aika) {
    this.matka = matka;
    this.aika = aika;
  }
  Matkailu.prototype.nopeus = function() {return this.matka/this.aika}
  
  let retki = new Matkailu(150,2);
  write(retki.nopeus());
  

  voidaan kirjoittaa staattisista kielistä tutun näköiseen tapaan:

  class Matkailu {
    constructor(matka,aika) {
      this.matka = matka;
      this.aika = aika;
    }
    nopeus() {
      return this.matka/this.aika
    }
  }
  let retki = new Matkailu(150,2);
  write(retki.nopeus());
  

• Tutkitaan Pienellä testiympäristöllä millainen rakenne tästä class-määrittelyä käyttävästä ohjelmasta syntyy:

  

• Kuten huomataan rakenne on aivan sama kuin alkuperäisellä tavalla ohjelmoiden!

• Mielestäni tässä on taas yksi hyvä perustelu sille, että joka tapauksessa tuo ohjelmien sisäinen esitys on syytä tuntea!

• Uusi "luokkamäärittely" tarjoaa myös "luokkametodit" (eli "staattiset" metodit):

  class Luokka {
    static luokkametodi() {
      write("Olen luokkametodi.")}
    ilmentymametodi() {
      write("Olen ilmentymämetodi.")}
  }
  
  Luokka.luokkametodi();
  let x = new Luokka
  x.ilmentymametodi()
  
  write("\n******* Luokan kentät ********")
  oK(Luokka)
  write("\n******* x:n kentät ********")
  oK(x)
  write("\n******* x.__proto__:n kentät ********")
  oK(x.__proto__)
  
  

  Ohjelma tulostaa:

  Olen luokkametodi.
  Olen ilmentymämetodi.
  
  ******* Luokan kentät ********
  prototype: [object Object]
  luokkametodi: luokkametodi() {
      write("Olen luokkametodi.")}
  length: 0
  name: Luokka
  --------
  
  ******* x:n kentät ********
  --------
  
  ******* x.__proto__:n kentät ********
  constructor: class Luokka {
    static luokkametodi() {
      write("Olen luokkametodi.")}
    ilmentymametodi() {
      write("Olen ilmentymämetodi.")}
  }
  ilmentymametodi: ilmentymametodi() {
      write("Olen ilmentymämetodi.")}
  --------
  

• Täysin sama rakenne voidaan ohjelmoida perinteisempään tapaan:

  function KonstLuokka() {
    
  }
  KonstLuokka.luokkametodi = 
    () => write("Olen luokkametodi.")
  KonstLuokka.prototype.ilmentymametodi = 
    () => write("Olen ilmentymämetodi.")
  
  KonstLuokka.luokkametodi();
  let x = new KonstLuokka()
  x.ilmentymametodi()
  
  write("\n******* KonstLuokan kentät ********")
  oK(KonstLuokka)
  write("\n******* x:n kentät ********")
  oK(x)
  write("\n******* x.__proto__:n kentät ********")
  oK(x.__proto__)
  
  

  Tämä ohjelma tulostaa lähes saman rakenteen:

  Olen luokkametodi.
  Olen ilmentymämetodi.
  
  ******* KonstLuokan kentät ********
  luokkametodi: () => write("Olen luokkametodi.")
  prototype: [object Object]
  length: 0
  name: KonstLuokka
  --------
  
  ******* x:n kentät ********
  --------
  
  ******* x.__proto__:n kentät ********
  constructor: function KonstLuokka() {
    
  }
  ilmentymametodi: () => write("Olen ilmentymämetodi.")
  --------
  

• Molemmista versioista syntyy rakenne:

  

• Huom: JavaScriptin "luokkametodi" ei kunnolla vastaa luokkapohjaisten oliokielten luokkametodia: Oikeaa luokkametodia voidaan soveltaa myös olioon eli luokan ilmentymään samalla seurauksella kuin luokkanimeen soveltamalla. JavaScriptin "luokkametodia" voidaan käyttää vain "luokkanimeen" sovellettuna. Esimerkissä siis x.luokkametodi() ei olisi mahdollinen! Varmista että ymmärrät tämän kuvasta!

• "Luokkia" voidaan määritellä myös luokkaliteraaleina. "Luokkiin" voidaan ohjelmoida gettereitä ja settereitä. Mutta "luokkiin" ei voida (toistaiseksi?) ohjelmoida lainkaan varsinaisia tietokenttiä! Konstruktorifunktioon ohjelmoidut tietokentät tulevat tuttuun tapaan konstruktorifunktion prototyyppiolion kentiksi.

• Ja kaikki tämä oli vasta ensikosketus prototyyppeihin ja periytymiseen. Jatkoa seuraa... ;-)

Kenttiin viittaminen ja kenttänimien syntaksi

• Olion kenttiin voi pisteilmauksen lisäksi viitata myös taulukon indeksoinnin tapaan. Kenttänimet on tällöin annettava merkkijonoina:

  var retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  
  write(retki["matka"]);            // 150
  retki["aika"] = -3.14;
  write(retki["aika"]);             // -3.14
  write(retki["nopeus"]());         // -47.77070063694267
  write(retki["hasOwnProperty"]()); // false
  

• Kenttään viittaaminen hakasulkuilmauksella sallii myös kenttänimen dynaamisen valinnan:

  var retki = 
    {matka: 150,
     aika: 2,
     nopeus: function() {return this.matka/this.aika}
    }
  
  var x = "ai" + "ka";
  write(retki[x]);                      // 2
  write(retki[prompt("Mikä kenttä?")]); // Kokeile tätä eri syöttein!
  
  

• Kenttänimenä voi käyttää melkein mitä tahansa: tunnus, merkkijono (jopa tyhjä), luku, ..., kaikki sellaiset kielen arvot, jotka voi muuttaa merkkijonoksi:

  var otus =
    { tunnus:      11,
      "mjono":     22,
      "":          33,
      128:         44,
      3.14:        55,
      "yks juttu": 66,
      1:           77
    }  
  oK(otus)
  

  Tulostus:

  1: 77
  128: 44
  tunnus: 11
  mjono: 22
  : 33
  3.14: 55
  yks juttu: 66
  --------
  

  Asetellaan arvoja:

  otus[3.14] = 123
  otus.tunnus = -12
  otus[1] = 2.4e-100;
  otus[""] = "Ahaa!"
  oK(otus)
  

  Tulostus:

  1: 2.4e-100
  128: 44
  tunnus: -12
  mjono: 22
  : Ahaa!
  3.14: 123
  yks juttu: 66
  --------
  

  (En ole keksinyt, mikä tuo kenttien tulostuksen läpikäyntijärjestys on! Tavalla tai toisella se liittynee kenttänimien String-esitykseen? Hmm. referenssi sanoo "arbitary order"... Lienee tarkoituksella jätetty toteutusriippuvaksi?)

• Vain tunnuksen muotoisiin kenttiin voi viitata pisteilmauksella, kaikkiin muihin on viitattava hakasulkein!

• Mikään ei estä kirjoittamasta samoja kenttiä yhteen olioon useampaan kertaan. Vain viimeinen jää voimaan:

  var o =
    { tunnus:      11,
     "tunnus":    22,
      tunnus:      33
    }
  oK(o)    // tunnus: 33
           // --------
  

Attribuuttien läpikäynti

• Luvussa Lauseita ja kontrollin ohjausta olion kenttiä käytiin läpi for..in-lauseella. Tämä menettely löytää olion kaikki ns. numeroituvat (numerable) attribuutit, myös perityt. (Perimisestä tulee lisää juttua seuraavissa luvuissa...)

  var olio = {a:1, b:2, c:3, d: function(x) {this.b+=x}}; 
  olio.d(100)
  for (kentta in olio)
    write(kentta + ": " + olio[kentta]);
  

  Tulostus:

  a: 1
  b: 102
  c: 3
  d: function (x) {this.b+=x}
  

  Tässä esimerkissä ei näy perityn yhtään numeroituvaa attribuuttia.

• Object-olion funktiolla attribuutin voi muuttaa numeroitumattomaksi (non-enumerable):

  Object.defineProperty(olio, 'd', { value: function(x) {this.b+=x}, enumerable: false });
  

  Edellinen esimerkki muunnettuna:

  var olio = {a:1, b:2, c:3, d: function(x) {this.b+=x}};
  olio.d(100)
  for (kentta in olio)
    write(kentta + ": " + olio[kentta]);  // kenttä d tulee mukaan
  
  write("--------")
  
  Object.defineProperty(olio, 'd', { value: function(x) {this.b+=x}, enumerable: false });
  
  for (kentta in olio)
    write(kentta + ": " + olio[kentta]);  // NYT KENTTÄ d EI OLE MUKANA
  

  Tällaisella menettelyllä on selvästi käyttöä, esim.

  var opiskelija = {
         nimi:      "Muumi Papanpoika",
         arvo:      "Fil.yo", 
         koepisteet: 24,
         harjpist:   11,
         bonuspist:   8
      }
  
  Object.defineProperty(opiskelija, 'nimi', {enumerable: false });
  Object.defineProperty(opiskelija, 'arvo', {enumerable: false });
  
  var pisteet = 0;
  for (kentta in opiskelija)
    pisteet += opiskelija[kentta];
  
  write(pisteet);   // tulostuu kauniisti 43
                    // jos nimi- ja arvokenttä olisi numeroituva,
                    // tulostuisi 0Muumi PapanpoikaFil.yo24118
  

• Muitakin attribuuttien ominaisuuksia voi säätää, esim. muuttamattomuutta, ks. esim MDN:n referenssi. Vielä pieni esimerkki:

  var x = {}                      // tyhjä olio
  Object.defineProperty(x, "a",   // lisätään ominaisuus
      {value: 101,
      writable: false,
      enumerable: true,
      configurable: true}
  )
  write(x.a)  // 101
  x.a=2
  write(x.a)  // 101
  

• Muunnetaanpa vaikka opiskelijan "arvo" muuttamattomaksi:

  var opiskelija = {
         nimi:      "Muumi Papanpoika",
         arvo:      "Fil.yo", 
         koepisteet: 24,
         harjpist:   11,
         bonuspist:   8
      }
  
  Object.defineProperty(opiskelija, 'arvo', {writable: false, enumerable: false });
  
  opiskelija.arvo = "maisteri"
  write(opiskelija.arvo);       // Fil.yo
  

  Aidossa JavaScript-hengessä tuota kenttää saa muuttaa niin paljon kuin sielu sietää, mutta eihän se siitä miksikään muutu...

  Mutta eipä syytä huolestua, maisteriksi voi silti päästä kun ensin osaa vähän komennella: ;-)

  Object.defineProperty(opiskelija, 'arvo', {writable: true});
  
  opiskelija.arvo = "maisteri"
  write(opiskelija.arvo);      // maisteri  :-)
  
  

• Object.keys(o) palauttaa arvonaan taulukon, jossa on vain oliossa itsessään määriteltyjen numeroituvien kenttien kenttänimet.
  Object.getOwnPropertyNames(o) palauttaa taulukon, jossa ovat mukana myös omat numeroitumattomien kenttien kenttänimet:

  var olio = {a:1, b:2, c:3, d: function(x) {this.b+=x}};
  
  Object.defineProperty(olio, 'd', {enumerable: false });
  
  write(Object.keys(olio));                // a,b,c
  write(Object.getOwnPropertyNames(olio)); // a,b,c,d
  
  

• Olion kaikkien numeroituvien kenttien nimet, myös prototyyppiketjusta perityt, löytyvät esimerkiksi seuraavasti (Object.getPrototypeOf(o) antaa viitteen parametrina annetun olion prototyyppiin)

  function kaikkiKentat(o) {
    for(var olio = o; olio !== null; olio = Object.getPrototypeOf(olio)) {
      write("--------");
      write(Object.getOwnPropertyNames(olio));
    }
  }
  

  Tutkitaan muutamien olioiden kaikkien kenttänimien joukkoa:

  Pelkkä "tietue":

  var o = {a:1, b:2};
  kaikkiKentat(o);
  
  --------
  a,b
  --------
  toSource,toString,toLocaleString,valueOf,hasOwnProperty,isPrototypeOf,
  propertyIsEnumerable,__defineGetter__,__defineSetter__,__lookupGetter__,
  __lookupSetter__,__proto__,constructor
  
  

  Olio jossa on myös funktio:

  var olio = {a:1, b:2, c:3, d: function(x) {this.b+=x}};
  kaikkiKentat(olio);
  
  --------
  a,b,c,d
  --------
  toSource,toString,toLocaleString,valueOf,hasOwnProperty,isPrototypeOf,
  propertyIsEnumerable,__defineGetter__,__defineSetter__,__lookupGetter__,
  __lookupSetter__,__proto__,constructor
  
  

  Tyhjällä uudella oliolla on vain prototyyppinsä kentät:

  kaikkiKentat(new Object());
  
  --------
  
  --------
  toSource,toString,toLocaleString,valueOf,hasOwnProperty,isPrototypeOf,
  propertyIsEnumerable,__defineGetter__,__defineSetter__,__lookupGetter__,
  __lookupSetter__,__proto__,constructor
  
  

  Kenttiähän riittää ...

• "Kurkistetaan konepellin alle": Mikäs otus oikein on tuo, johon oman olion __proto__-kenttä viittaa?

  var olio = {a:1, b:2, c:3, d: function(x) {this.b+=x}};
  oK(olio.__proto__)
  

  Mitäs sieltä löytyykään:

  toSource: function toSource() {
      [native code]
  }
  toString: function toString() {
      [native code]
  }
  toLocaleString: function toLocaleString() {
      [native code]
  }
  valueOf: function valueOf() {
      [native code]
  }
  hasOwnProperty: function hasOwnProperty() {
      [native code]
  }
  isPrototypeOf: function isPrototypeOf() {
      [native code]
  }
  propertyIsEnumerable: function propertyIsEnumerable() {
      [native code]
  }
  __defineGetter__: function __defineGetter__() {
      [native code]
  }
  __defineSetter__: function __defineSetter__() {
      [native code]
  }
  __lookupGetter__: function __lookupGetter__() {
      [native code]
  }
  __lookupSetter__: function __lookupSetter__() {
      [native code]
  }
  __proto__: null
  constructor: function Object() {
      [native code]
  }
  

  Tuohan on vanha tuttu (?) Object-funktion prototype-kentän osoittama prototyyppiolio! Näkyy kurssin symbolikuvassa ylhäällä oikealla!

• Pienen testiympäristön funktiot oK(o) ja kK(o) on ohjelmoitu seuraavasti:

  function oK(o) { // omat kentät
    var t = Object.getOwnPropertyNames(o);
    for (var i=0; i<t.length; ++i)
      write(t[i]+": "+ o[t[i]]);
    write("--------");
  }
  
  function kK(o) {  // kaikki kentät
    for(var olio = o; olio !== null; olio = Object.getPrototypeOf(olio)) {
      write("--------");
      var t = Object.getOwnPropertyNames(olio);
      for (var i=0; i<t.length; ++i)
        write(t[i]+": "+ olio[t[i]]);
    }
  } 
  
  

Getterit ja setterit

this, bind, call ja apply

by WebCounter
(21.10.2013)