Jedan od konfuznih pojmova u JavaScriptu je 

 ključna riječ. Iako je već ispisano dosta tekstova upravo o ovom pojmu, ponekad je teško razumjeti i povezati sve činjenice koje su raspršene po internetu.

Jedan od izazova sa kojim se susretnemo u razumijevanju ove ključne riječi se javlja ako smo već upoznati sa nekim class-orijentisanim jezikom, kao što je Java na primjer. U takvim jezicima 

 ključna riječ je vezana za instancu jedne klase, i korištenjem ove riječi referiramo se isključivo na tu instancu. Pomoću nje pristupamo poljima i metodama neke instance, dok to kod JavaScripta ponekad to i nije slučaj, pa nam to zna zadati glavobolju.

 ključne riječi izgleda kod klasno baziranog jezika, 

class Klasa { ​
​ ​ ​ private String prop;​
​ ​ ​ public Klasa(prop) {​
​ ​ ​ ​ ​ ​ ​ this.prop = prop;​
​ ​ ​ }​
​
​ ​ ​ public String getProp() {​
​ ​ ​ ​ ​ ​ ​ return this.prop;​
​ ​ ​ }​
}​
​
var Obj = new Klasa("New Prop");​
​
Obj.getProp()

S obzirom na to da od novijih verzija JavaScript jezika na raspolaganju imamo ključnu riječ 

 koju možemo koristiti da mimikujemo klasno bazirano objektno orijentisano programiranje, ponekad se može činiti da je i JavaScript klasno orijentisan jezik. 

Međutim, i dalje JavaScript i u novijim verzijama je "prototype" baziran OOP jezik. Pa imamo mogućnost da mimikujemo, ali ne i da se oslonimo kompletno na ponašanja klasno baziranog jezika,  što ćemo najbolje vidjeti na primjeru 

Ovako izgleda skoro isti primjer prepisan u JavaScriptu sa jednom 

class Klasa { ​
​ ​ ​ constructor(prop) {​
​ ​ ​ ​ ​ ​ ​ this.prop = prop​
​ ​ ​ }​
​
​ ​ ​ toString() {​
​ ​ ​ ​ ​ ​ ​ return function () { ​
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ this.prop​
​ ​ ​ ​ ​ ​ ​ }​
​ ​ ​ }​
}​
​
const Obj = new Klasa('random string')​
​
Obj.toString()()

Ukoliko pokušate izvršiti kod iz primjera iznad, dobićete 

Razlog za to je što se vezivanje - referenciranje this ključne riječi u JavaScriptu dešava kao "runtime" vezivanje i kontekstualno je bazirano. Ovo u prijevodu znači da se 

 određuje u zavisnosti od uslova kako i gdje je funkcija koja koristi ovu ključnu riječ pozvana. 

Iz ovoga proističe da određivanje vrijednosti ove ključne riječi ne zavisi od toga na kome mjestu je napisana, kao što je slučaj u class-orijentisanim jezicima, pa se može činiti da ponekad se dešavaju nepredvidive stvari. 

Ipak, postoji par pravila koja treba pratiti da bi ublažili glavobolje i nepredvidive situacije kada koristimo 

ukoliko nije specificirano drugačije, po defaultu this će referencirati globalni objekat baziran na okruženju(browse = window);

u strikt modu u globalnom kontekstu uvijek će biti 

; važno je spomenuti da su moduli, klase, deklarisane i klasne ekspresije implicitno u strikt modu;

 će biti proslijeđeni objekat u funkciju.

 referenca će biti na novi proizvedeni objekat.

 ekspresija koju u potpunosti treba izbjeći pa se nećemo ni osvrtati u tekstu. Slično je i sa 

 funkcijom koju nije preporučljivo koristiti i treba ju izbjeći ako je moguće.

//globalni objekat​
console.log(this)​
​
// nije globalni objekat​
(function(){​
​ console.log(this)​
})();

Iz primjera možemo vidjeti da this referenca nije vezana za instancu objekta, a isto tako nije vezana ni za mjesto u kom je napisana, nego je vezana za način na koji je pozvana.

U JavaScriptu postoje 3 glavna izvršna konteksta za koji kada se pozovu kreiraju se izvršni rekordi. Ove rekorde, ili unose, možemo posmatrati kao objekte koji sadrže odredjene informacije. A to mogu biti:

Function rekord čuva veze o funkciji, pa tako i 

 referencu, osim u slučaju kada je funkcija Arrow Funkcija(=>) o tom ćemo detaljnije kasnije u tekstu.

Module Rekord drži nepromjenjive veze izmedju ostalih rekorda i okruzenja, u biti čuva informacije o 

 .... I na kraju, global rekord se koristi kao najveći vanjski scope koji je dijeljen sa svim JavaScript elementima.

Kontekst prolazi kroz dvije faze a to su "Pravljenje" i "Izvršavanje" upravo tog Izvršnog konteksta. Prilikom faze "Pravljenja" kreiraju se rekordi vezani za taj kontekst kao što su npr. objekti gdje su pospremljene sve varijable"[VO]", scope lanac i closure, i ono što je nama trenutno bitno referenca na this objekat. Tako kad god se uspostavi novi Izvrsni kontekst dobijamo i novu this referencu.

> određivanja this ključne riječi u funkcijama

Ulazak u function izvršni kontekst se dešava prilikom pozivanja funkcije. Postoje 4 načina kako možemo pozvati funkciju I sve i jedan od sljedećih poziva će kreirati Function izvršni kontekst.

Tagged templejti ("string interpolation") 

Da bi znali koja je trenutna this referenca trebamo posmatrati trenutni izvršni kontekst, tacnije gdje je funkcija pozvana.


const Obj = {​
​ ​ ​ toString() {​
​ ​ ​ ​ ​ ​ ​ // Obj === this​
​ ​ ​ ​ ​ ​ ​ return function () { ​
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ // Obj !== this​
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ this.prop​
​ ​ ​ ​ ​ ​ ​ }​
​ ​ ​ }​
}​
const inner = Obj.toString()​
​
inner()

Ako posmatramo kod možemo primjetiti da inner() funkcija nije pozivom vezana za toString funkciju niti za Obj objekat, nego je pozvana direktno u globalnom kontekstu pa možemo pretpostaviti da this referencira globalni objekat što bi značilo u strikt modu da ne referencira ništa da je vrijednost "undefined".

S druge strane, ukoliko bi kod izgledao ovako

const Obj = {​
​ ​ ​ stuff: 'String'​
​ ​ ​ toString() {​
​ ​ ​ ​ ​ ​ ​ return this.stuff​
​ ​ ​ }​
}​
​
Obj.toString()

Vidimo da je funkcija nije pozvana "sama" u globalnom kontekstu sa lijeve strane je Obj objekta pa možemo pretpostaviti da će referenca na this u ovom slučaju biti direktno povezana sa Obj objektom ukoliko se ne desi da neki drugi izvršni kontekst ne utiče.

Da ponovimo, svako od ovih će pozvati funkciju 

 i napraviti novi Function izvršni kontekst, te ako ništa ne mjenja to u tom izvršnom kontekstu referenca na 


Obj.toString()​
Obj.toString?.()​
Obj?.toString()​
Obj["toString"]()​
Obj.toString``

Iz sljedećeg primjera se može primjetiti da funkcija koja vraća funkciju iako se nalazi na objektu nema veze tim što živi na toj instanci neće referencirati njega nego Function kontekst funkcije toString, Pa smo u doba jQuery-a ovakve probleme riješavali na sljedeći način:

var Obj = {​
​ ​ ​ stuff: 'String'​
​ ​ ​ toString() {​
​ ​ ​ ​ ​ ​ ​ var self = this​
​ ​ ​ ​ ​ ​ ​ return function () {​
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ return self.stuff​
​ ​ ​ ​ ​ ​ ​ }​
​ ​ ​ }​
}​

U toString metodi bi spremili trenutnu referencu na this i sa clousure-om bi imali dostupnu tu vrijednost i unutar funckije koju vraćamo iz 

 funkcije. Pojavom es2015 verzije jezika dosta problema je riješeno i jezik je dobio novu dimenziju. Jedno od tih poboljšanja su i arrow funkcije (=>), koje su na jedan način otklonile i ovaj ponavljajuci kod 

 Same Arrow funkcije ne vezuju this referencu, vec ce prilikom izvrsavanja jedne Arrow funkcije u Function rekordu biti zabilježeno da je 

 referenca leksična - preuzeta od roditeljskog konteksta, pa će engine rekurzivno pogledati sljedeće Izvršne rekorde dok ne pronađe this referencu. U ovom slučaju to će biti vanjska funkcija toString. Uz Arrow funkcije iz prošlog primjera će izgledati ovako

const Obj = {​
​ ​ ​ stuff: 'String'​
​ ​ ​ toString() {​
​ ​ ​ ​ ​ ​ ​ return () => {​
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ return this.stuff​
​ ​ ​ ​ ​ ​ ​ }​
​ ​ ​ }​
}

Pa onda ako pozovemo ovu metodu na Obj.toString() trebalo bi da se ponaša onako kako smo i zamislili.

Ovo bi bilo implicitno vezivanje onako kako bi engine sam povezao this referencu u trenutnom kontekstu izvrsavanja.

Ipak, treba spomenuti da postoji i explicitno vezivanje u kome je moguće "isforsirati" this referencu na onu koja nam odgovara ukoliko se desi da gubimo implicitne što je vrlo čest slučaj, pa nam jezik nudi funkcije kao sto su .call i .apply koje nam dozvoljavaju da sami promjenimo referencu.

Jezik nam je omogućio da sve naše napisane funkcije posjeduju i ove navedene funkcije koje se nalaze na 

. Obe funkcije call i apply kao prvi parametar uzimaju objekat koji ćemo referencirati kao 

 u toj funkciji i listu parametara koji treba da porslijedimo funkciji. Jedina razlika je da 

 prima "varargs" argument za pozivne arugmente funkciji koju pozivamo, dok 

function toString(arg) {​
        return this.stuff + arg​
}​
​
const someObj = {​
        stuff: 'Random String'​
};​
​
toString.call(somObj, 'forwarded argument')​
​
// varijanta sa apply​
toString.apply(somObj, ['forwarded argument'])

Važno je pomenuti da u "sloppy" modu(kada se kod ne izvršava u strict modu) primitivne vrijednosti će biti coerceovane u objekte, tzv. primitive type boxing, pa ako proslijedimo 

 tako i svi ostali primitivni tipovi dok 

 koji mogu biti "opasni" jer će promjeniti 

Dok u strict modu vrijednosti neće biti boxovane i bit će korišteni primitivi kao reference

"use strict"​
​
function toString() {​
​ ​ ​ console.log(this)​
}​
​
toString.call('random string')​

 bit će primitivna vrijednost "random string" za razliku od "slopy" moda gdje bi bila 'String { value }'

Kako ne bismo morali svaki puta pozivati funkciju sa nekom od 

 funkcijama, postoji i funkcija na prototipu 

koja će zauvijek zaključati this referencu toj funkciji i vratit će novu funkciju sa tom this referencom.

function toString() {​
​ ​ ​ return this.stuff​
}​
​
const bounded = toString.bind({ stuff: 'random string' })​
​
bounded()​

Povratna vrijednost će biti random string. Ovo isto mozemo postici i koristenjem call i apply.

Kada u JavaScriptu pozovemo funkciju koristeći 

 operator, engine će interno postaviti odredjene propertije kao što su prototype chain, takodje, u slucaju da je napisan bazni konstruktor, postaviće this referencu na objekat koji je konstruisan. Pod baznim konstruktorom se podrazumijeva da funkcija ne extenda neku drugu konstruktorsku funkciju, npr. 

 u primjeru jer od ES 2015 verzije postoji i ključna riječ class u jeziku što je novi način da pišemo konstruktor funkcije.

Pominjem konstruktor funkcije iako više niko ne piše konstruktor funkcije, ipak ne treba zaboraviti da je class idalje samo sintatički dodatak konstruktor funkcijama, pa tako djelimo i dobre i loše strane konstruktor funkcija i sa novim klasama.

function FunctionConstructor(args){​
​ this.stuff = args​
}​
​
var Obj = new FunctionConstructor('random string')​
​
class ClassKeyword{​
​ constructor(args){​
​ ​ ​ this.stuff = args​
​ }​
}​
​
const Obj = new ClassKeyword('random string');

 operator u pozadini se za nas automatski dešavanju 4 stvari a to su:

Instancira se nova instanca -objekat- i vezuje se 

Ako se sjetimo funkcija sa početka gdje je 

vraćala funkciju vidjeli smo kako smo odvojili funkciju od objekta pa tako ako ste radili ili nažalost i sad radite react sa class komponentama call-back funckijama je trebalo eksplicitno referencirati 

 jer bi se te funkcije pozivale u nekom od drugih izvršnih konteksta, a zbog ovog prvog pravila moguće je jednostavno eksplicitno postaviti 

 na funkciju u konstruktoru pa bi to izgledalo ovako:

constructor(props) {​
​ ​ ​ super(props)​
​ ​ ​ this.handler = this.handler.bind(this)​
}

 bi se desio gubitak reference i pokazivali bi na 

 objekat, a to je (kako smo prethodno spomenuli) u 

Jedno od ponašanja new ključne riječi kada klasa "nasljeđuje" druge klase 

, Naslijeđene klase ne postavljaju odmah this po pozivanju. To se dešava samo kada se dosegnu bazne klase kroz seriju 

 poziva (koji se dešavaju implicitno) zbog čega nije moguće koristiti 

 pozove se konstruktor bazne klase i postavi se 

` leksično u funkcijskom izvršnom rekordu.

class Base {​
​ ​ ​ constructor(arg1) {​
​ ​ ​ ​ ​ ​ ​ this.arg1 = arg1​
​ ​ ​ }​
}​
​
class Derived extends Base {​
​ constructor(arg1, arg2){​
​ ​ ​ // Using `this` before `super` results in a ReferenceError.​
​ ​ ​ super(arg1);​
​ ​ ​ this.arg2 = arg2;​
​ }​
}​
​
const derivedInstance = new Derived('Random', 'String');

Derived {arg1: 'Random', arg2: 'String'}​
[[Prototype]]: Base

Od posljednje verzije ES2022 dobili smo i klasna polja koja se isto tako evaluiraju kada se klasa evaluira. Osnovni principi su da ako je static polje tada this referencira klasu, a ako polje nije static tada će referencirati instancu konkretan objekat.

Takođe smo dobili i private propertije koji se ponašaju isto kao i ostali propertiji, osim sto se izvršavaju u posebnom konekstu koji nije vidljiv ostalim konekstima.

Strikt mod se treba koristiti uvijek i svugdje. Bitno je razumjeti da ako pozivamo 

 baš kao i metoda u klasičnim class orijentisanim jezicima. 

Ipak, ako tu metodu odvojimo u posebnu funkciju 

 koja nema objekat sa lijeve strane tada trebamo koristiti 

funckije da isforsiramo referencu na this koju želimo. 

=> fat arrrow funkcije nemaju mogućnost da vezuju 

Ensar Bavrk

This u JavaScriptu

Top IT poslovi u tvom inboxu

Top IT poslovi u tvom inboxu