Tento článok je pokračovaním série o dedičnosti v JavaScripte:

Oveľa lepšie, ako pchať metódy priamo do konštruktora, je na to využiť jeho vlastnosť prototype. Robí sa to takto:

function Fruit( color )
{
  this.color = color;
}

Fruit.prototype.yellColor = function()
{
  alert( this.color );
};

var apple = new Fruit( "red" );
apple.yellColor(); // => "red"

→ Vyskúšajte

Každá funkcia má vlastnosť prototype. Pri inštancovaní operátorom new JavaScript nastaví novému objektu jeho spomínanú vlastnosť __proto__ na prototype konštruktora. Čiže na pozadí volania var apple = new Fruit( "red" ); sa udeje niečo takéto:

// Vytvorí obycajný objekt
var apple = new Object();
// Nastaví __proto__ na prototyp konštruktora
apple.__proto__ = Fruit.prototype;
// Zavolá nad apple metódu Fruit
Fruit.call(apple, "red");

apple.yellColor(); // => "red"

→ Vyskúšajte

Metóda yellColor() nie je nastavená priamo inštancii, a preto sa JavaScript pozrie na jeho __proto__, ktorý ukazuje na Fruit.prototype a tam ju bezpečne nájde a vykoná.

V príklade z minulej časti sme ukazovali na problém 100ks ovocia. Ak to skúsime teraz, uvidíme, že funkcia yellColor() je iba jedna, pre všetky inštancie spoločná:

Ak by sme chceli prinútiť všetky inštancie vypisovať svoje farby do konzoly, stačí zmeniť prototyp konštruktora, trebárs aj v inej knižnici, či v projektovo-závislom kóde:

Fruit.prototype.yellColor = function()
{
  console.log(this.color);
}

apple.yellColor(); // => "red" ale tentokrát už do konzoly

→ Vyskúšajte

V ďalšej časti o tom ako funguje dedičnosť medzi triedami.

Ďalšie časti: