Prototipsko nasledjivanje

Uvod

Prototipsko nasledjivanje (eng. prototypal inheritance) je vrsta nasledjivanja gde objekat nasledjuje svojstva direktno od drugog objekta (ne od nekogo šablona tj. klase). Postoje dva osnovna mehanizma koji omogućavaju prototipsko nasledjivanje:

Concatenative inheritance
Ovaj proces se zasniva na direktnom kopiranju svojstva jednog ili više objekata u novi objekat. Treba napomenuti da je za kopiranje svojstva neophodno da enumerable deskriptor svojstva bude setovan na true. Ovaj mehanizam je prihvaćen i sa standardom ES2015, uz pomoć metode “Object.assign()”.

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var velikiObjekat = Object.assign({}, o1, o2, o3);
console.log(velikiObjekat); // { a: 1, b: 2, c: 3 }

var o1 = { a: 1, b: 1, c: 1 };

var o2 = { b: 2, c: 2 };

var o3 = { c: 3 };

var velikiObjekat = Object.assign({}, o1, o2, o3);

console.log(velikiObjekat); // { a: 1, b: 2, c: 3 }

Prototipsko delegiranje
Ovaj proces se zasniva se na principu da se svojstva i metode nasledjuju kroz “lanac povezanih prototype objekata” (eng. “prototype chain”).

NAPOMENA:
Uokviru standarda ES2015 je predstavljena syntax-a za kreiranje objekata preko klasa, medjutim to je samo estetska promena jer se u pozadini sav posao oko nasledivanja izvršava prema prethodno pomenutom mehanizmu “prototipsko delegiranje”.

Prototipsko delegiranje

Definicija

funkcija objekt

Prototipsko delegiranje je najvažniji mehanizam nasledjivanja objekta u JavaScript-u. Zasniva se na principu da se svojstva i metode nasledjuju kroz “lanac povezanih prototype objekata” (eng. “prototype chain”).
Funkcija Object() je “majka” svih objekata, koja kroz svoj “Object.prototype” objekat prosledjuje svim novo-generisanim objektima neka osnovna svojstva i metode. Više o ovome svojstvu konstruktorke funkcije Object() pročitajte u članku Object() & Object.prototype
Svaki novi objekat ima takodje svoj “prototype” objekat koji je u prvi mah prazan, ali je povezan preko “lanca nasledjivanja” sa roditeljskim objektom, njegovim roditeljskim objektom i tako sve do Object.Prototype objekta. Lanac nasledjivanja je ustvari skup povezanih prototype objekata koji se završava zaključno sa Object.prototype.
Da bi neki objekat mogao da prosledi svom nasledniku metodu, potrebno je da definiše metodu u njegovom prototype objektu, jer je tako pravi dostupnom ostalim objektima koji će da nastanu na osnovu njega.

nekiObjekat.prototype.metodaZaNasledjivanje = function(){
   //telo metode za nasledjivanje
}

nekiObjekat.prototype.metodaZaNasledjivanje = function(){

//telo metode za nasledjivanje

}

OBJAŠNJENJE:
Kada JavaScript engine traži neku metodu prvo proverava da li smo je definisali u okviru sopstvenog prototype objekata. Ukoliko ga ne nadje tu, onda ga traži u prototype objektu roditelja. Ali ukoliko ga i tamo ne nadje tražiće dalje duž lanca medjusobno povezanih prototype objekata sve dok ne dodje do poslednjeg u lancu “Objec.prototype”. Ako ga ne nadje ni u njemu izbacuje error.

Zbog čega koristiti prototipsko delegiranje?

Razlog za korišćenje prototipsko delegiranja kao glavnog načina nasledjivanja je dobra optimizacija resursa, a to se najbolje objašnjava kroz poredjenje sa ne-optimizovnim mehanizmom. Prvo ćemo generisati objekte samo na osnovu konstruktorske f-je, koristeći rezervisanu reč new. Tako generisani objekti u sebi dobijaju kopiju svojstava i metoda koji se nalaze u konstruktorskoj funkciji u trenutku generisanja.

function Auto(marka, model, godinaProizvodnje) {
  this.motor = "dizel";
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
  this.prikaziPoruku = function(){
     console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
  };
}
var mojAuto = new Auto("Citroen", "C5", 2012);

function Auto(marka, model, godinaProizvodnje) {

this.motor = "dizel";

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

this.prikaziPoruku = function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

}

var mojAuto = new Auto("Citroen", "C5", 2012);

Novo generisani objekat (mojAuto) je dobio kopiju svih svojstava. Stoga treba obratiti pažnju na činjenicu da ukoliko nakon generisanja objekta promenimo neko svojstvo u konstruktorskoj funkciji ono neće imati uticaja na instancirani objekat, jer oni nisu povezani:

Auto.motor = "Benzinac";  // promenimo vrednost svojstva konstruktorske funkcije
mojAuto.motor; // Vraća: "dizel" (bez uticaja promene konstruktorskog svojstva na instancirani objekat)

1 2	Auto.motor = "Benzinac"; // promenimo vrednost svojstva konstruktorske funkcije mojAuto.motor; // Vraća: "dizel" (bez uticaja promene konstruktorskog svojstva na instancirani objekat)

Loša strana ovoga pristupa izlazi na videlo kada se na osnovu ovakve konstruktorske funkcije instancira veliki broj novih objekata. Razlog za to je činjenica da se pri instanciranju novih objekata u svakom objektu instanciraju i metode, stoga ovakav pristup nepotrebno troši resurse za instanciranje iste metode u svakom objektu.
Za dobijanja optimizovanijeg koda se preporučuje mehanizam “konstruktorska funkcija + prototipsko nasledjivanje”. Kod ovog mehanizma se metode koje su potrebne svim novim objektima definišu u “prototip objektu“. Takve metode smeštene u prototip objekat se instanciraju samo jednom u okviru tog roditeljskog objekta, dok se ostalim objektima (generisanim na osnovu roditeljskog) delegiraju duž lanca nasledjivanja. Svojstva su specifična za svaki objekat stoga njih definišemo u konstruktorskoj funkciji, jer tako svaki novi objekat dobija svoju kopiju sa specifičnim vrednostima.

function Auto(marka, model, godinaProizvodnje) {
  this.marka = marka;
  this.model = model;
  this.godProizvodnje = godinaProizvodnje;
}
Auto.prototype.prikaziPoruku = function(){
   console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")
};
var mojAuto = new Auto("Citroen", "C5", 2012);
mojAuto.prikaziPoruku();  // Vraća: "Auto je: Citroen C5 proizveden 2012 godine"

function Auto(marka, model, godinaProizvodnje) {

this.marka = marka;

this.model = model;

this.godProizvodnje = godinaProizvodnje;

}

Auto.prototype.prikaziPoruku = function(){

console.log("Auto je: " + this.marka +" " + this.model + " proizveden " + this.godProizvodnje + " godine")

};

var mojAuto = new Auto("Citroen", "C5", 2012);

mojAuto.prikaziPoruku(); // Vraća: "Auto je: Citroen C5 proizveden 2012 godine"

Nakon generisanja novog objekta (“mojAuto”), njemu je dostupna metoda prikaziPoruku(), koja je instancirana jedino u roditeljskom prototype objektu.

NAPOMENA:
Nasledjivanje putem prototype objekata je “živa stvar”! Ukoliko se naknadno promeni svojstvo u prototype objektu, uticaće na sve generisane objekte koji nasledjuju to svojstvo duž lanca nasledjivanja.

Prototipsko nasledjivanje kroz primer

Princip rada nasledjivanja objekata delegiranjem svojstava ćemo najbolje objasniti kroz primere.

Osnovni objekat:

Krenućemo od jednostavne konstruktorske funkcije Pocetna() i njenog prototype objekta, pa ćemo generisati nove objekte koristeći ključnu reč new():

function Pocetni(ulaz1, ulaz2) {
  this.svojstvoPrvo = ulaz1;
  this.svojstvoDrugo = ulaz2;
}
Pocetni.prototype.metodPrvi = function() {
  console.log(this.svojstvoPrvo)
};
Pocetni.prototype.metodDrugi = function() {
  console.log(this.svojstvoDrugo)
};

//************* NOVI OBJEKAT  **********************
var pocetni1 = new Pocetni("vrednost1", "vrednost2");
pocetni1.metodPrvi();  // Vraca "vrednost1"
pocetni1.metodDrugi(); // Vraca "vrednost2"

function Pocetni(ulaz1, ulaz2) {

this.svojstvoPrvo = ulaz1;

this.svojstvoDrugo = ulaz2;

}

Pocetni.prototype.metodPrvi = function() {

console.log(this.svojstvoPrvo)

};

Pocetni.prototype.metodDrugi = function() {

console.log(this.svojstvoDrugo)

};

//************* NOVI OBJEKAT **********************

var pocetni1 = new Pocetni("vrednost1", "vrednost2");

pocetni1.metodPrvi(); // Vraca "vrednost1"

pocetni1.metodDrugi(); // Vraca "vrednost2"

Konstruktorksa funkcija i njen prototype objekat u JavaScript-u su nešto najbliže što možemo “prići” pojmu klase iz drugih programskih jezika. Novo generisani objekat je pri samom činu stvaranja objekta kopirao sva svojstava iz konstruktorske funkcije (Pocetni()), i povezao svoj prototip objekat sa roditeljskim. Treba naglasiti da naš novi objekat (“pocetni1”), kao i svaki objekat generisan sa ključnom reči “new”, nema svoju konstruktorsku funkciju (nema “Pocetni1()” f-ju), pa njegovo svojstvo .constructor ukazuje na konstruktorsku funkciju Pocetni().

prototype dijagram 1

Ekstendovani objekat:

U narednom delu je opisan postupak kreiranja novog objekta koji ekstenduje funkciju Pocetni():

a) Kreiranje nove konstruktorske funkcije i povezivanje sa svojstvima Pocetni()

Kreiranje modifikovanog “šablon objekta” počinje sa definisanjem nove konstruktorske funkcije:

function ModifikovaniPocetni(ulaz3) {
  this.svojstvoTrece = ulaz3;
}

function ModifikovaniPocetni(ulaz3) {

this.svojstvoTrece = ulaz3;

}

Da bi nasledili svojstava iz druge konstruktorske funkcije, koristimo metodu call(). Metoda call() omogućava da redefinišemo značenje ključne reči “this”. Nama je potrebno da “this” napisan u konstruktorskoj funkciji “Pocetni()”, ukazuje na novo kreirane objekte nastale korišćenjem funkcije ModifikovaniPocetni(). Stoga za prvi parametar metode (zadužen za redefinisanje “this”) napišemo “this”, jer time definišemo da značenje reči “this” ukazuje na “this” (a to je po korišćenju ključne reči new ustvari novo generisani objekat). Kroz ostale parametre metode call() prosledjujemo dva parametra neophodna za svojstvoPrvo i svojstvoDrugo.

function ModifikovaniPocetni(ulaz1, ulaz2, ulaz3) {
  Pocetni.call(this, ulaz1, ulaz2);
  this.svojstvoTrece = ulaz3;
}

function ModifikovaniPocetni(ulaz1, ulaz2, ulaz3) {

Pocetni.call(this, ulaz1, ulaz2);

this.svojstvoTrece = ulaz3;

}

b) Povezivanje prototype objekata sa lancom nasledjivanja

U zavisnosti na koji način želimo da dodelimo metode našem “ModifikovaniPocetni.prototype” objektu, povezivanje prototype objekta se može izvršiti sa:

new()

Pošto je svaki novo generisani objekat “zakačen” za lanac nasledjivanja, dodeljivanjem novo generisanog objekta našem prototype objektu omogućavamo našem prototype objekatu pristup “lanacu nasledjivanja”.

ModifikovaniPocetni.prototype = new Pocetni()

1

ModifikovaniPocetni.prototype = new Pocetni()

Medjutim ovaj način nije preporučen jer njegovim korišćenjem nepotrebno ubacujemo i svojstva iz konstruktorske funkcije (svojstvoPrvo, svojstvoDrugo) u lanac nasledjivanja.
Object.create()

Ovaj pristup je preporučen, jer pored kreiranja novog objekta, “Object.create()” metoda takodje direktno povezuje dva prototype objekta (prototype objekat novo kreiranog objekta i roditeljski prototip). Ovim povezivanjem za roditeljski prototip, naš novi objekat se “zakačio” za ceo lanac nasledjivanja, pa su mu dostupne sve metode iz njega.

ModifikovaniPocetni.prototype = Object.create(Pocetni.prototype);

1

ModifikovaniPocetni.prototype = Object.create(Pocetni.prototype);

Medjutim pošto pri ovakvom povezivanju prototype objekata nije korišćena naša konstruktorska funkcija “ModifikovaniPocetni()”, JavaScript engine je ne prepoznaje, pa će potražiti “dublje” duž lanca nasledjivanja, gde je i nalazi kao funkciju “Pocetna()”. Tako da metoda .constructor našeg novog objekta trenutno ukazuje na pogrešan objekat “Pocetni()”. Ovo nije dobro, pa je stoga potrebno da to i promenimo:

ModifikovaniPocetni.prototype.constructor = ModifikovaniPocetni

1

ModifikovaniPocetni.prototype.constructor = ModifikovaniPocetni

c) Dodavanje novih funkcionalnosti

Nakon ekstendovanja našeg novog objekta svojstvima i metodama “roditeljskog” objekta, možemo naš novi objekat “obogatiti” sa novim funkcionalnostima:

ModifikovaniPocetni.prototype.metodTreci = function() {
  console.log(this.svojstvoTrece)
};

ModifikovaniPocetni.prototype.metodTreci = function() {

console.log(this.svojstvoTrece)

};

Čak možemo da menjamo ekstendovanu metodu, tako što definišemo u našem objektu metodu sa istim imenom koja će da “zakloni” (eng. shadowing) nasledjenu metodu.

ModifikovaniPocetni.prototype.metodDrugi = function() {
  console.log("Zaklonjena druga metoda" )
};

ModifikovaniPocetni.prototype.metodDrugi = function() {

console.log("Zaklonjena druga metoda" )

};

Pa tako svi kreirani objekti na osnovu ovog modifikovanog imaju sledeće funkcionalnosti:

var modifikovaniPocetni1 = new ModifikovaniPocetni("unos1", "unos2", "unos3" );
modifikovaniPocetni1.metodPrvi();    // Vraća "unos1"
modifikovaniPocetni1.metodDrugi();   // Vraća "Zaklonjena druga metoda"
modifikovaniPocetni1.metodTreci();   // Vraća "unos3"

var modifikovaniPocetni1 = new ModifikovaniPocetni("unos1", "unos2", "unos3" );

modifikovaniPocetni1.metodPrvi(); // Vraća "unos1"

modifikovaniPocetni1.metodDrugi(); // Vraća "Zaklonjena druga metoda"

modifikovaniPocetni1.metodTreci(); // Vraća "unos3"

prototype dijagram 2

Objedinjeni kod iz primera:

//********************************* POČETNI OBJEKAT ********************************
function Pocetni(ulaz1, ulaz2) {
  this.svojstvoPrvo = ulaz1;
  this.svojstvoDrugo = ulaz2;
}
Pocetni.prototype.metodPrvi = function() {
  console.log(this.svojstvoPrvo)
};
Pocetni.prototype.metodDrugi = function() {
  console.log(this.svojstvoDrugo)
};

//************** Generisani pocetni objekti ***********************
var pocetni1 = new Pocetni("vrednost1", "vrednost2");
pocetni1.metodPrvi();  // Vraca "vrednost1"
pocetni1.metodDrugi(); // Vraca "vrednost2"



//***************************** EXTENDOVANI OBJEKAT *********************************
function ModifikovaniPocetni(ulaz1, ulaz2, ulaz3) {
  Pocetni.call(this, ulaz1, ulaz2);
  this.svojstvoTrece = ulaz3;
}

ModifikovaniPocetni.prototype = Object.create(Pocetni.prototype);
ModifikovaniPocetni.prototype.constructor = ModifikovaniPocetni;

ModifikovaniPocetni.prototype.metodTreci = function() {
  console.log(this.svojstvoTrece)
};
ModifikovaniPocetni.prototype.metodDrugi = function() {
  console.log("Zaklonjena druga metoda");
};

//********** Generisani ekstendovani objekti *******************
var modifikovaniPocetni1 = new ModifikovaniPocetni("unos1", "unos2", "unos3" );
modifikovaniPocetni1.metodPrvi();    // Vraća "unos1"
modifikovaniPocetni1.metodDrugi();   // Vraća "Zaklonjena druga metoda"
modifikovaniPocetni1.metodTreci();   // Vraća "unos3"

//********************************* POČETNI OBJEKAT ********************************

function Pocetni(ulaz1, ulaz2) {

this.svojstvoPrvo = ulaz1;

this.svojstvoDrugo = ulaz2;

}

Pocetni.prototype.metodPrvi = function() {

console.log(this.svojstvoPrvo)

};

Pocetni.prototype.metodDrugi = function() {

console.log(this.svojstvoDrugo)

};

//************** Generisani pocetni objekti ***********************

var pocetni1 = new Pocetni("vrednost1", "vrednost2");

pocetni1.metodPrvi(); // Vraca "vrednost1"

pocetni1.metodDrugi(); // Vraca "vrednost2"

//***************************** EXTENDOVANI OBJEKAT *********************************

function ModifikovaniPocetni(ulaz1, ulaz2, ulaz3) {

Pocetni.call(this, ulaz1, ulaz2);

this.svojstvoTrece = ulaz3;

}

ModifikovaniPocetni.prototype = Object.create(Pocetni.prototype);

ModifikovaniPocetni.prototype.constructor = ModifikovaniPocetni;

ModifikovaniPocetni.prototype.metodTreci = function() {

console.log(this.svojstvoTrece)

};

ModifikovaniPocetni.prototype.metodDrugi = function() {

console.log("Zaklonjena druga metoda");

};

//********** Generisani ekstendovani objekti *******************

var modifikovaniPocetni1 = new ModifikovaniPocetni("unos1", "unos2", "unos3" );

modifikovaniPocetni1.metodPrvi(); // Vraća "unos1"

modifikovaniPocetni1.metodDrugi(); // Vraća "Zaklonjena druga metoda"

modifikovaniPocetni1.metodTreci(); // Vraća "unos3"

Podelite:

Web Programiranje

Skripte

Uvod

Prototipsko delegiranje

Definicija

Zbog čega koristiti prototipsko delegiranje?

Prototipsko nasledjivanje kroz primer

Osnovni objekat:

Ekstendovani objekat:

a) Kreiranje nove konstruktorske funkcije i povezivanje sa svojstvima Pocetni()

b) Povezivanje prototype objekata sa lancom nasledjivanja

new()

Object.create()

c) Dodavanje novih funkcionalnosti

Objedinjeni kod iz primera:

Ostavite komentar