Razumevanje ključne besede JavaScript "ta".

Kaj pomeni to pomeni ključna beseda v JavaScriptu? In kako ga lahko praktično uporabite v svojem programu JavaScript? To je nekaj pogostih vprašanj, ki si jih postavljajo novinci in celo nekateri izkušeni razvijalci JavaScripta to ključna beseda.

Če ste eden tistih razvijalcev, ki se sprašujejo, kaj za to ključna beseda je vse, potem je ta članek za vas. Raziščite kaj to se nanaša v različnih kontekstih in se seznanite z nekaterimi napakami, da se izognete zmedi in seveda napakam v vaši kodi.

"ta" znotraj globalnega obsega

V svetovnem kontekstu, to bo vrnil okno predmet, dokler je zunaj funkcije. Globalni kontekst pomeni, da ga ne postavite znotraj 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++
}

Če zaženete zgornjo kodo, bi dobili objekt okna.

"ta" notranje funkcije (metode)

Pri uporabi znotraj funkcij, to se nanaša na objekt, na katerega je funkcija vezana. Izjema je, ko uporabljate to v samostojni funkciji, v tem primeru vrne okno predmet. Oglejmo si nekaj primerov.

V naslednjem primeru je reciName funkcija je znotraj jaz objekt (tj. je metoda). V takih primerih, to se nanaša na objekt, ki vsebuje funkcijo.

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

to ali je jaz objekt, tako rekoč to.ime znotraj reciName metoda je popolnoma enaka kot jaz.name.

Drug način razmišljanja o tem je, da bo tisto, kar je na levi strani funkcije, ko je priklicana to. To pomeni, da lahko ponovno uporabite reciName funkcijo v različnih predmetih in to se bo vsakič nanašal na popolnoma drugačen kontekst.

Zdaj, kot je bilo že omenjeno, to vrne okno predmet, kadar se uporablja znotraj samostojne funkcije. To je zato, ker je samostojna funkcija vezana na okno privzeti objekt:

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

Klicanje pogovor () je enako kot klicati window.talk()in vse, kar je na levi strani funkcije, bo samodejno postalo to.

Za nameček je to se ključna beseda v funkciji obnaša drugače Strogi način JavaScripta (se vrne nedoločeno). To je tudi nekaj, kar morate upoštevati, ko uporabljate knjižnice uporabniškega vmesnika, ki uporabljajo strogi način (npr. React).

Uporaba "tega" s funkcijo Function.bind()

Obstajajo lahko scenariji, v katerih funkcije ne morete preprosto dodati objektu kot metodo (kot v zadnjem razdelku).

Morda predmet ni vaš in ga vlečete iz knjižnice. Objekt je nespremenljiv, zato ga ne morete kar spremeniti. V takšnih primerih lahko še vedno izvedete funkcijski stavek ločeno od objekta z uporabo Function.bind() metoda.

V naslednjem primeru je reciName funkcija ni metoda na jaz predmet, vendar ste ga še vedno vezali z uporabo vezati() funkcija:

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

V katerikoli predmet greš vezati() bo uporabljen kot vrednost to v tem klicu funkcije.

Če povzamemo, lahko uporabite vezati() na kateri koli funkciji in prenese v nov kontekst (predmet). In ta predmet bo prepisal pomen to znotraj te funkcije.

Uporaba "tega" s funkcijo Function.call()

Kaj pa, če ne želite vrniti popolnoma nove funkcije, ampak preprosto pokličete funkcijo, potem ko jo povežete z njenim kontekstom? Rešitev za to je klic() metoda:

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

The klic() metoda takoj izvede funkcijo, namesto da vrne drugo funkcijo.

Če funkcija zahteva parameter, ga lahko posredujete prek klic() metoda. V naslednjem primeru posredujete jezik v reciName() funkcijo, tako da jo lahko uporabite za pogojno vračanje različnih sporočil:

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

Kot lahko vidite, lahko poljuben parameter preprosto posredujete funkciji kot drugi argument v klic() metoda. Prav tako lahko posredujete poljubno število parametrov.

The uporabi() metoda je zelo podobna klic() in vezati(). Edina razlika je v tem, da posredujete več argumentov tako, da jih ločite z vejico z klic(), medtem ko posredujete več argumentov znotraj matrike z uporabi().

V povzetku, bind(), call() in apply() vsi vam omogočajo klicanje funkcij s popolnoma drugačnim objektom, ne da bi imeli kakršno koli razmerje med obema (tj. funkcija ni metoda na objektu).

"ta" notranje funkcije konstruktorja

Če pokličete funkcijo z a novo ključno besedo, ustvari a to objekt in ga vrne:

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

V zgornji kodi ste ustvarili tri različne objekte iz iste funkcije. The novo ključna beseda samodejno ustvari vez med predmetom, ki se ustvarja, in to ključna beseda znotraj funkcije.

"ta" notranje funkcije povratnega klica

Funkcije povratnega klica so drugačen od rednih funkcij. Funkcije za povratni klic so funkcije, ki jih posredujete drugi funkciji kot argument, tako da jih je mogoče izvesti takoj, ko se glavna funkcija konča z izvajanjem.

The to ključna beseda se nanaša na popolnoma drugačen kontekst, kadar se uporablja znotraj funkcij povratnega klica:

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

Po eni sekundi po klicu oseba funkcijo konstruktorja in ustvarjanje novega jaz bo objekt okna zabeležil kot vrednost to. Ko se torej uporablja v funkciji povratnega klica, to se nanaša na okenski objekt in ne na "konstruiran" objekt.

To lahko odpravite na dva načina. Prva metoda je uporaba vezati() vezati oseba funkcijo na novo zgrajen objekt:

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

Z zgornjo spremembo, to v povratnem klicu bo pokazal na isto to kot funkcija konstruktorja (the jaz objekt).

Drugi način za rešitev problema to v funkcijah povratnega klica je z uporabo puščičnih funkcij.

"ta" Notranje puščične funkcije

Puščične funkcije se razlikujejo od navadnih funkcij. Svojo funkcijo povratnega klica lahko spremenite v puščično funkcijo. S funkcijami puščic ne potrebujete več vezati() ker se samodejno veže na novo zgrajen objekt:

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

Več o JavaScriptu

Naučili ste se vse o ključni besedi "ta" in o tem, kaj pomeni v vseh različnih kontekstih v JavaScriptu. Če ste novinec v JavaScriptu, vam bo zelo koristilo, če se boste naučili vseh osnov JavaScripta in njegovega delovanja.