Izpratne par JavaScript "šo" atslēgvārdu

Ko dara šis atslēgvārds JavaScript nozīmē? Un kā jūs varat to praktiski izmantot savā JavaScript programmā? Šie ir daži no biežākajiem jautājumiem, ko iesācēji un pat daži pieredzējuši JavaScript izstrādātāji uzdod par šis atslēgvārds.

Ja esat viens no tiem izstrādātājiem, kas vēlas uzzināt, kas šis atslēgvārds ir viss, tad šis raksts ir paredzēts jums. Izpētiet, ko šis attiecas dažādos kontekstos un iepazīstieties ar dažām kļūdām, lai izvairītos no neskaidrībām un, protams, kļūdām savā kodā.

"šis" globālajā mērogā

Globālā kontekstā, šis atgriezīs logs objekts, ja vien tas atrodas ārpus funkcijas. Globālais konteksts nozīmē, ka jūs to neievietojat funkcijā.

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

Ja palaižat iepriekš minēto kodu, jūs iegūsit loga objektu.

"šīs" iekšējās funkcijas (metodes)

Lietojot funkciju ietvaros, šis attiecas uz objektu, ar kuru funkcija ir saistīta. Izņēmums ir tad, kad lietojat šis atsevišķā funkcijā, un tādā gadījumā tā atgriež logs objektu. Apskatīsim dažus piemērus.

Nākamajā piemērā sakiVārds funkcija atrodas iekšpusē es objektu (t.i., tā ir metode). Tādos gadījumos kā šis, šis attiecas uz objektu, kas satur funkciju.

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

šis ir es objekts, tā sakot šis.nosaukums iekšpusē sakiVārds metode ir tieši tāda pati kā es.vārds.

Vēl viens veids, kā par to domāt, ir tas, ka tas, kas atrodas funkcijas kreisajā pusē, kad tiek izsaukts, tiks izsaukts šis. Tas nozīmē, ka varat atkārtoti izmantot sakiVārds funkcionēt dažādos objektos un šis katru reizi atsauksies uz pilnīgi citu kontekstu.

Tagad, kā jau minēts iepriekš, šis atgriež logs objektu, ja to izmanto atsevišķas funkcijas ietvaros. Tas ir tāpēc, ka atsevišķa funkcija ir saistīta ar logs objekts pēc noklusējuma:

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

Zvana runāt () ir tas pats, kas zvanīt window.talk(), un viss, kas atrodas funkcijas kreisajā pusē, automātiski kļūs par šis.

Sānu piezīmē, šis atslēgvārds funkcijā darbojas atšķirīgi JavaScript stingrais režīms (tas atgriežas nenoteikts). Tas ir arī jāpatur prātā, ja izmantojat lietotāja saskarnes bibliotēkas, kurās tiek izmantots stingrs režīms (piemēram, React).

"Šī" izmantošana ar Function.bind()

Var būt gadījumi, kad funkciju nevar vienkārši pievienot objektam kā metodi (kā pēdējā sadaļā).

Iespējams, objekts nav jūsu, un jūs to ņemat no bibliotēkas. Objekts ir nemainīgs, tāpēc jūs to nevarat vienkārši mainīt. Šādos gadījumos jūs joprojām varat izpildīt funkcijas paziņojumu atsevišķi no objekta, izmantojot Function.bind() metodi.

Nākamajā piemērā sakiVārds funkcija nav metode uz es objektu, bet jūs joprojām to saistījāt, izmantojot saistīt() funkcija:

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

Neatkarīgi no tā, kurā objektā jūs ieejat saistīt() tiks izmantota kā vērtība šis šajā funkcijas izsaukumā.

Rezumējot, jūs varat izmantot saistīt() uz jebkuru funkciju un nodot jaunā kontekstā (objektā). Un šis objekts pārrakstīs nozīmi šis šīs funkcijas iekšpusē.

"Šī" izmantošana ar Function.call()

Ko darīt, ja nevēlaties atgriezt pilnīgi jaunu funkciju, bet gan vienkārši izsaukt funkciju pēc saistīšanas ar kontekstu? Risinājums tam ir zvanīt () metode:

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

The zvanīt () metode nekavējoties izpilda funkciju, nevis atgriež citu funkciju.

Ja funkcijai ir nepieciešams parametrs, varat to nodot, izmantojot zvanīt () metodi. Nākamajā piemērā jūs nododat valodu uz sakiVārds() funkciju, lai jūs varētu to izmantot, lai nosacīti atgrieztu dažādus ziņojumus:

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

Kā redzat, jūs varat vienkārši nodot jebkuru parametru, kuru vēlaties funkcijai kā otro argumentu zvanīt () metodi. Varat arī nodot tik daudz parametru, cik vēlaties.

The pieteikties () metode ir ļoti līdzīga zvanīt () un saistīt(). Vienīgā atšķirība ir tā, ka jūs nododat vairākus argumentus, atdalot tos ar komatu ar zvanīt (), savukārt masīvā nododat vairākus argumentus ar pieteikties ().

Kopsavilkumā, bind(), call() un pieteikties() visas ļauj izsaukt funkcijas ar pilnīgi atšķirīgu objektu bez jebkādas attiecības starp abiem (t.i., funkcija nav objekta metode).

"šīs" konstruktora iekšējās funkcijas

Ja izsaucat funkciju ar a jauns atslēgvārds, tas rada a šis objektu un atgriež to:

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

Iepriekš minētajā kodā jūs izveidojāt trīs dažādus objektus no vienas un tās pašas funkcijas. The jauns atslēgvārds automātiski izveido saiti starp objektu, kas tiek izveidots, un šis atslēgvārds funkcijā.

"šīs" iekšējās atzvanīšanas funkcijas

Atzvanīšanas funkcijas ir atšķiras no parastajām funkcijām. Atzvanīšanas funkcijas ir funkcijas, kuras kā argumentu nododat citai funkcijai, lai tās varētu izpildīt uzreiz pēc galvenās funkcijas izpildes.

The šis atslēgvārds attiecas uz pavisam citu kontekstu, ja to izmanto atzvanīšanas funkcijās:

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

Pēc vienas sekundes zvanīšanas persona konstruktora funkciju un radot jaunu es objektu, tas reģistrēs loga objektu kā vērtību šis. Tātad, ja to izmanto atzvanīšanas funkcijā, šis attiecas uz loga objektu, nevis uz "konstruēto" objektu.

Ir divi veidi, kā to novērst. Pirmā metode tiek izmantota saistīt() saistīt persona funkcija jaunizveidotajam objektam:

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

Ar iepriekš minēto modifikāciju, šis atzvanīšanā norādīs uz to pašu šis kā konstruktora funkcija ( es objekts).

Otrs veids, kā atrisināt problēmu šis atzvanīšanas funkcijās tiek izmantotas bultiņu funkcijas.

"Šīs" iekšējās bultiņas funkcijas

Bultiņu funkcijas atšķiras no parastajām funkcijām. Atzvanīšanas funkciju varat padarīt par bultiņas funkciju. Ar bultiņu funkcijām jums vairs nav vajadzīgas saistīt() jo tas automātiski saistās ar jaunizveidoto objektu:

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

Uzziniet vairāk par JavaScript

Jūs esat uzzinājis visu par atslēgvārdu “šis” un to, ko tas nozīmē dažādos JavaScript kontekstos. Ja esat iesācējs JavaScript lietošanā, jūs iegūsit lielu labumu, apgūstot visus JavaScript pamatus un tā darbību.