Šta možete pročitati ovdje?
- Uvod i ključna riječ
this. - Metoda
.call(). - Metoda
.apply(). - Metoda
.bind().
Uvod i ključna riječ this
U drugim izričito objektno orijentisanim jezicima ključna riječ this se uvijek odnosi na trenutnu instancu klase. U JavaScriptu this se ponaša malo drugačije. Vrijednost riječi this zavisi od toga kako/gdje je funkcija pozvana.
U svrhu ovog teksta jednostavno ćemo reći da se this u JavaScriptu odnosi na objekat koji je pozvao metodu. Vizuelno će to biti objekat koji se nalazi lijevo od tačke prilikom pozivanja metode.
Recimo npr. da imamo objekat osoba sa određenim svojstvima i jednom metodom koja koristi svojstva iz tog objekta.
Dakle, pozvali smo metodu reciKoSi iz objekta osoba. Objekat se nalazi lijevo od tačke i na njega se odnosi ključna riječ this. Zato metoda reciKoSi ima pristup svojstvima ime i godine iz objekta osoba. Ovo je očekivano ponašanje.
Međutim, šta ako pokušamo da dodijelimo ovu metodu kao vrijednost nekoj varijabli?
Ovo je potpuno validna JavaScript sintaksa, ali problem je nastupio kada smo pokušali da je pozovemo. Zašto ova metoda nema pristup svojstvima ime i godine? Zato što je nismo pozvali na osoba objektu. Pozvali smo je bez reference na bilo koji objekat. To automatski znači da se this odnosi na globalni window objekat, a taj objekat nema svojstva ime i godine.
Upravo ovo je jedna od situacija zbog kojih kažemo da referenca ključne riječi this zavisi od toga kako je pozvana funkcija.
Ovakvo ponašanje ključne riječi this je jedan od razloga zbog kog je this izvor velike zabune u JavaScriptu, pa se njeno korištenje često i izbjegava.
Kao što sam već rekao ovo je samo jedan od razloga. Ključna riječ this je izuzetno složena tema sama za sebe i više nego dovoljna da bude tema jednog odvojenog teksta. No, u svrhu današnje teme dovoljno je shvatiti da se this odnosi na objekat koji je pozvao metodu, odnosno vizuelno objekat koji se nalazi lijevo od tačke prilikom pozivanja metode.
Metoda .call()
Jedna od tri veoma važne metode u JavaScriptu u objektno orijentisanom pristupu je .call() metoda.
Recimo npr. da imamo dva objekta osoba1 i osoba2.
Objekat osoba1 ima metodu reciKoSi kojom može da se predstavi tako što će reći ime i godine. Ali šta ako bilo gdje u aplikaciji želimo da se neka druga osoba predstavi. Objekat osoba2 nema metodu reciKoSi, ali želimo da je iskoristimo. Da bi izbjegli dupliciranje koda tako što bi samo kopirali istu metodu reciKoSi u objekat osoba2 itd., itd. sa bilo kojim drugim objektom kojem bi mogla koristiti da funkcija, tu na snagu stupa .call() metoda.
Sintaksa je takva da ćemo jednostavno pozvati reciKoSi metodu iz objekta osoba1 i onda vezati .call metodu. Prvi argument je objekat na koji želim da se odnosi ključna riječi this. Objekat kojim mijenjamo kontekst za this.
Šta se ovdje dogodilo? Pozvali smo .call metodu, ali sa drugim kontekstom. Sa objektom osoba2 kao argumentom promijenili smo kontekst za ključnu riječ this, odnosno promijenili smo na šta se odnosi this. Rekli smo pozovi reciKoSi metodu, ali this će da se odnosi na objekat osoba2.
Pored prvog argumenta koji mijenja kontekst za this, .call metoda može da dobije i bilo koji broj drugih argumenata, baš kao i svaka druga funkcija. Ti argumenti će biti uneseni poslije objekta jedan za drugim.
Recimo npr. da u našem primjeru objekti imaju svojstvo omiljeniSlatkiši, koje je predstavljeno kao niz stringova. Metoda za dodavanje novih omiljenih slatkiša će biti dodajSlatkiš.
Poslije objekta smo unijeli sve argumente koje metoda dodajSlatkiš ima na raspolaganju.
Metoda .apply()
Metoda .apply() je identična po ponašanju kao i .call metoda. Jedina razlika je u argumentima koji se unose poslije objekta.
Dakle, sintaksa je slična kao i kod .call() metode. Jedina razlika je što se argumenti poslije objekta unose u jednom nizu, umjesto jedan za drugim kao što je u .call() metodi. Kao i kod .call() metode možemo navesti koliko god želimo argumenata.
Metoda .bind()
Slično kao i u prethodna dva slučaja u .bind() metodi možemo da promijenimo kontekst za this.
Razlika je u tome što bind metoda neće odmah pozvati metodu, što je slučaj ko call i apply metoda. Bind funkcioniše tako što će vratiti funkciju, sa datim kontekstom i parametrima/argumentima, koja može kasnije biti pozvana.
Dakle ovo neće imati nikakav uticaj na objekat osoba2:
Ovdje funkcija/metoda dodajSlatkiš nije pozvana. Međutim, možemo referencu na ovu metodu staviti u neku varijablu za kasnije pozivanje.
Ili možda čak i primjer gdje argumente dodajemo prilikom pozivanja funkcije dodajIskriSlatkiš.
Ova ova primjera će za donijeti isti rezultat.
Dakle, .bind() poziv nam je dao na raspolaganje funkciju sa osoba2 kontekstom i parametrima. Tu vrijednost smo proslijedili varijabli dodajIskriSlatkiš da bi je kasnije mogli pozvati. Iako izgleda da smo pozvali funkciju dodajIskriSlatkiš iz globalnog objekta, ona nije preuzela njegov kontekst, nego ima kontekst koji smo joj naveli u .bind() metodi.
Upravo .bind metoda je rješenje za naš problem sa početka ovog teksta kada smo izgubili kontekst za objekat osoba prilikom proslijeđivanja njegove metode reciKoSi u varijablu za kasnije pozivanje.
Neke druge teme o kojim sam pisao na temu JavaScripta, web developmenta, možete pronaći ovdje.
Top comments (0)