Crearea obiectelor in JavaScript

Nu exista o modalitate corecta (sau cea mai corecta) de a crea obiecte in JavaScript.

let dog = {
sound:"ham",
talk: function(){
   console.log(this.sound)
  }
};

dog.talk(); // va afisa "ham"

Avem un obiect “dog”, care are o proprietate “sound”, care are atribuit un string “ham” si metoda “talk”, metoda ce va printa proprietatea. Dupa ce se apeleaza metoda dog.talk() se va afisa “ham”.

let talkFunction= dog.talk;
talkFunction(); // va fi undefined

Am luat metoda “dog.talk” si am reasignat-o unei variabile si apoi am apelat accea variabila.

In JavaScript putem asigna o functie unei variabile, iar acest lucru este posibil pentru ca JavaScript nu este doar un limbaj orientat pe obiecte, este si un limbaj de programare functionala. Functiile sunt values ca si string-urile sau numere, deci pot fi stocate in variabile.

In exemplu, se va afisa “undefined” pt ca de aceasta data “this” nu va mai fi “dog”. Intr-o functie cuvantul “this” nu se refera la contextul unde a fost definita functia, ci se refera la contextul unde functia a fost apelata.

let talkFunction= dog.talk;
let boundFunction=
   talkFunctionn.bind(dog);
boundFunction(); // va afisa "ham"

“Bind” ia functia “talk” si va returna o noua functie care va face bind(dog). In acest caz “bind” forteaza “this” sa fie “dog”.

let button = document.getElementBy('myNiceButton');

button.addEventListener(
'click',
dog.talk
);

Ne folosim de aceasta data de un buton, la care i-am asignat pe eventul de click, metoda “talk”. Cand se va face click pe buton, “this” nu va fi “dog” ci va fi “window object”.

Acest lucru se poate rezolva adaugand “bind”.

button.addEventListener(
'click',
dog.talk.bind(dog)
);

THIS AND BIND

Avem functia talk cu un parametru sound, care va afisa acel parametru. Astfel, cand functia va fi apelata, se va afisa “lalala”.

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

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

Acum vom sterge parametrul functiei si in console.log vom incerca sa accesam proprietatea sound cu this:

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

talk(); //undefined

Ce este this? In JavaScript cuvantul this inseamna acelasi lucru ca in engleza =>nu inseamna nimic fara a avea un context.(I dont’t like this. This what? => avem nevoie de context).
Daca vom apela functia talk(), se va afisa undefined.

Cand folosim this, trebuie sa cunoastem contextul. In acest caz this= global object, window object, depinde de compilator.

function talk(){
   console.log(this.sound);
};
 let boromir= {
  sound: 'my new sound'
}

let talkBoundToBoromir = talk.bind(boromir);
talkBoundToBoromir(); // va afisa "my new sound"
talk(); //undefined

Cu bind se spune in mod explicit la ce anume ne referim cand spunem this. 

talkBoundToBoromir() va functiona pentru ca este o copie a functiei talk() unde am binduit this la o valoare specifica.

O alta modalitate este sa punem o referinta la functie ca o proprietate. Un lucru foarte important este ca functile in JavaScript sunt doar niste valori, care pot fi atribuite unor proprietati.

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

let boromir= {
  speak: talk, // o referinta a functie talk a fost asignata la proprietatea speak
  sound: 'my new sound'
};

boromir.speak(); // am apelat proprietatea unui obiect
talk(); // undefined

// asignam unei variabile
let bla = boromir.speak;
bla();// undefined pentru ca bla se refera la acceasi functie

Folosind bind lucrurile se schimba putin:

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

let boromir= {
    sound: 'my new sound'
};

boromir.speak= talk.bind(boromir);

let bla = boromir.speak;
bla();// va afisa "my new sound" pentru ca a fost bind-uit
talk();// undefined

Un alt exemplu:

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

let boromir= {
    blabla: talk,
    sound: 'my new sound'
};

let gollum = {
    jabber: boromir.blabla,
    sound: "Happiness....."
};

gollum.jabber();// va afisa "Happiness....."

Concluzii:

-this reprezinta contextul in momentul apelului;

-o functie este doar o valoare;

-o functie poate fi asignata unei proprietati a unui obiect;

-o functie poate fi asignata unei variabile;

-o functie poate fi argumentul unei functii;

-un functie poate fi apelata in contexte multiple;

this are sens cand se cunoaste contextul, altfel se foloseste bind (se creaza o noua functie).

 

 

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s