Razumijevanje JavaScript ključne riječi "ovo".

Što to ovaj ključna riječ u JavaScriptu znači? I kako ga možete praktično koristiti u svom JavaScript programu? Ovo su neka od uobičajenih pitanja koja postavljaju početnici, pa čak i neki iskusni JavaScript programeri ovaj ključna riječ.

Ako ste jedan od onih programera koji se pitaju što ovaj ključna riječ, onda je ovaj članak za vas. Istražite što ovaj odnosi se u različitim kontekstima i upoznajte se s nekim nedostacima kako biste izbjegli zabunu i, naravno, greške u vašem kodu.

"ovo" unutar globalnog opsega

U globalnom kontekstu, ovaj će vratiti prozor objekt sve dok je izvan funkcije. Globalni kontekst znači da ga ne stavljate unutar funkcije.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Ako pokrenete gornji kod, dobit ćete objekt prozora.

"ovo" unutarnje funkcije (metode)

Kada se koristi unutar funkcija, ovaj odnosi se na objekt na koji je funkcija vezana. Iznimka je kada koristite ovaj u samostalnoj funkciji, u kojem slučaju vraća prozor objekt. Pogledajmo neke primjere.

U sljedećem primjeru, reciName funkcija je unutar mi objekt (tj. to je metoda). U ovakvim slučajevima, ovaj odnosi se na objekt koji sadrži funkciju.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

ovaj je mi objekt, tako govoreći ovo.ime unutar reciName metoda je potpuno ista kao ja.ime.

Drugi način razmišljanja o tome je da će ono što je na lijevoj strani funkcije kada se pozove biti ovaj. To znači da možete ponovno koristiti reciName funkcioniraju u različitim objektima i ovaj odnosit će se svaki put na potpuno drugačiji kontekst.

Sada, kao što je ranije spomenuto, ovaj vraća prozor objekt kada se koristi unutar samostalne funkcije. To je zato što je samostalna funkcija vezana za prozor objekt prema zadanim postavkama:

functiontalk() {
returnthis
}
talk() // returns the window object

zovem razgovor() je isto što i pozivanje window.talk(), a sve što je s lijeve strane funkcije automatski će postati ovaj.

Uz napomenu, ovaj ključna riječ u funkciji ponaša se drugačije u JavaScriptov strogi način rada (vraća se nedefiniran). Ovo također treba imati na umu kada koristite biblioteke korisničkog sučelja koje koriste strogi način rada (npr. React).

Korištenje "this" s Function.bind()

Mogu postojati scenariji u kojima ne možete jednostavno dodati funkciju objektu kao metodu (kao u prošlom odjeljku).

Možda predmet nije vaš i povlačite ga iz knjižnice. Objekt je nepromjenjiv, pa ga ne možete samo promijeniti. U ovakvim slučajevima još uvijek možete izvršiti naredbu funkcije odvojeno od objekta pomoću Function.bind() metoda.

U sljedećem primjeru, reciName funkcija nije metoda na mi objekt, ali ste ga svejedno vezali pomoću vezati() funkcija:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

U koji god predmet prođete vezati() koristit će se kao vrijednost ovaj u tom pozivu funkcije.

Ukratko, možete koristiti vezati() na bilo kojoj funkciji i proslijediti u novi kontekst (objekt). I taj objekt će prebrisati značenje ovaj unutar te funkcije.

Korištenje "this" s Function.call()

Što ako ne želite vratiti potpuno novu funkciju, već samo pozvati funkciju nakon što je vežete za njezin kontekst? Rješenje za to je poziv() metoda:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

The poziv() metoda odmah izvršava funkciju umjesto vraćanja druge funkcije.

Ako funkcija zahtijeva parametar, možete ga proslijediti putem poziv() metoda. U sljedećem primjeru, prosljeđujete jezik na reciName() funkciju, tako da je možete koristiti za uvjetno vraćanje različitih poruka:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Kao što vidite, možete samo proslijediti bilo koji parametar koji želite funkciji kao drugi argument u poziv() metoda. Također možete proslijediti onoliko parametara koliko želite.

The primijeniti () metoda je vrlo slična poziv() i vezati(). Jedina razlika je u tome što prosljeđujete više argumenata odvajajući ih zarezom sa poziv(), dok prosljeđujete više argumenata unutar niza s primijeniti ().

U sažetku, bind(), call() i apply() svi vam omogućuju pozivanje funkcija s potpuno različitim objektom bez ikakvog odnosa između to dvoje (tj. funkcija nije metoda na objektu).

"ovo" Unutarnje funkcije konstruktora

Ako pozovete funkciju s a novi ključna riječ, ona stvara a ovaj objekt i vraća ga:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

U gornjem kodu stvorili ste tri različita objekta iz iste funkcije. The novi ključna riječ automatski stvara vezu između objekta koji se stvara i ovaj ključna riječ unutar funkcije.

"ovo" unutarnje funkcije povratnog poziva

Funkcije povratnog poziva su različite od redovnih funkcija. Funkcije povratnog poziva su funkcije koje prosljeđujete drugoj funkciji kao argument, tako da se mogu izvršiti odmah nakon što glavna završi s izvođenjem.

The ovaj ključna riječ odnosi se na potpuno drugačiji kontekst kada se koristi unutar funkcija povratnog poziva:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Nakon jedne sekunde od pozivanja osoba funkciju konstruktora i stvaranje novog mi objekt, zabilježit će objekt prozora kao vrijednost ovaj. Dakle, kada se koristi u funkciji povratnog poziva, ovaj odnosi se na objekt prozora, a ne na "konstruirani" objekt.

Postoje dva načina da se to riješi. Prva metoda je korištenje vezati() vezati osoba funkciji novoizgrađenog objekta:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

S gornjom modifikacijom, ovaj u povratnom pozivu pokazat će na isto ovaj kao funkcija konstruktora (the mi objekt).

Drugi način rješavanja problema ovaj u funkcijama povratnog poziva je pomoću funkcija strelica.

"ovo" unutarnje funkcije strelica

Funkcije strelica razlikuju se od uobičajenih funkcija. Funkciju povratnog poziva možete učiniti funkcijom strelice. Uz funkcije strelica, više vam ne trebaju vezati() jer se automatski veže na novokonstruirani objekt:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Saznajte više o JavaScriptu

Naučili ste sve o ključnoj riječi "ovo" i što ona znači u svim različitim kontekstima u JavaScriptu. Ako ste novi u JavaScriptu, bit će vam od velike koristi ako naučite sve osnove JavaScripta i kako on funkcionira.