Prototypes

1.Ce sunt prototipurile?

De obicei cand auzim despre mostenire ne gandim la clase. In JavaScript obtinem mostenirea cu prototypes.

Prototipurile si clasele sunt diferite.In viata de zi cu zi un prototip ar putea fi asemanat cu un delegat. O persoana pe care o delegi sa voteze in locul tau atunci cand tu nu esti disponibil.

2. De ce trebuie sa invam despre prototipuri?

Primul motiv ar fi pentru ca este usor de invatat si al doilea motiv ar fi pentru ca in JavaScript exista “class” keyword.

Este un concept mai simplu decat clasele.

Exemplu 1:

function talk(sound){
   console.log(sound);
};

talk('ham'); //va afisa 'ham'

Exemplu 2:

function talk(){
   console.log(this);// this va fi global object, care nu are proprietatea sound
   console.log(this.sound);
};

talk(); //va afisa undefined

Exemplu 3:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

animal.talk(); 
// va afisa {talk: [Function: talk] }, pentru this
// undefined pt ca animal nu are proprietatea sound

Cand apelam animal.talk() tot ce este in stanga la talk va fi vazut ca si this.

Cand asignam unei proprietati o variabila cu acelasi nume, punem sa declaram astfel:

let animal = {
    talk
};

Exemplu 4:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

cat.talk();// eroare 'it's not a function' pt ca cat nu are functia talk

Exemplu 5:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

Object.setProtoTypeOf(cat, animal);

cat.talk(); 
//{sound: 'meow'} = this
//'meow'

Cum functioneaza? Merge intai in cat si se uita dupa functia talk, nu o gaseste si atunci o cauta in prototip. Are cat prototip? Da are si este animal, care are functia talk.

Exemplu 6:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

let dog = {
    sound:'ham'
};

Object.setProtoTypeOf(cat, animal);
Object.setProtoTypeOf(dog, animal);

cat.talk(); //'meow'

dog.talk(); //'ham'

Exemplu 7:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

let dog = {
    sound:'ham'
};

let bigDog = {
  hamham: function(){
       console.log(this.sound.toUpperCase());
  }
};

Object.setProtoTypeOf(cat, animal);
Object.setProtoTypeOf(dog, animal);

cat.talk(); //'meow'

dog.talk(); //'ham'

bigDog.hamham(); // cannot read property toUpperCase of undefined pt ca
// sound este undefined

Object.setProtoTypeOf(bigDog, dog);
bogDog.hamham();// 'HAM'

Un lucru important este ca prototipurile sunt delegates, ele nu creaza o copie a obiectului original, in acest caz animal. De fapt se delega accesul prototipului la obiectul original. Nu functioneaza ca si clasele care creaza copii.

Exemplu 8:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};
let dog = {
    sound:'ham'
};

let bigDog = {
  hamham: function(){
       console.log(this.sound.toUpperCase());
  }
};

Object.setProtoTypeOf(dog, animal);

animal.talk = function() {
console.log('lalala');
};

Object.setProtoTypeOf(bigDog, dog);

dog.talk(); // va afisa lalala
bigDog.hamham();// va afisa 'HAM'

Desi am setat prototipul pt dog inainte se a asigna alta valoare functie talk, dog.talk() va afisa ‘lalala‘.

Cum functioneaza? Cand se apeleaza dog.talk() se cauta prima data functia talk in dog, nu se gaseste si merge cautarea mai departe in prototip (animal). Acolo gaseste functia talk, dar care a fost schimbata.

Concluzii:

-foloseste pentru acest obiect un alt obiect ca si back-up, ca si prototype;

– daca se apeleaza un obiect cu o proprietate pe care nu o are, cauta proprietatea in celalalt obiect care este prototipul;

-setProtoTypeOf(obj, prototypeObj);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s