Înțelegerea cuvântului cheie JavaScript „acest”

Ce face acest cuvânt cheie în JavaScript înseamnă? Și cum îl poți folosi practic în programul tău JavaScript? Acestea sunt câteva dintre întrebările frecvente pe care le pun începătorii și chiar unii dezvoltatori JavaScript experimentați acest cuvânt cheie.

Dacă ești unul dintre acei dezvoltatori care se întreabă ce acest cuvântul cheie este totul, atunci acest articol este pentru tine. Explorează ce acest se referă la în contexte diferite și familiarizați-vă cu unele probleme pentru a evita confuzia și, desigur, erori în codul dvs.

„aceasta” în sfera globală

În context global, acest va returna fereastră obiect atâta timp cât se află în afara unei funcții. Contextul global înseamnă că nu îl plasați într-o funcție.

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

Dacă rulați codul de mai sus, veți obține obiectul fereastră.

„acest” în interiorul funcțiilor (metode)

Când este utilizat în interiorul funcțiilor, acest se referă la obiectul la care este legată funcția. Excepția este atunci când utilizați acest într-o funcție autonomă, caz în care returnează fereastră obiect. Să vedem câteva exemple.

În exemplul următor, spune Nume funcția este în interiorul pe mine obiect (adică este o metodă). În cazuri ca acesta, acest se referă la obiectul care conține funcția.

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

acest este pe mine obiect, spunând așa acest nume în interiorul spune Nume metoda este exact aceeași ca eu.nume.

Un alt mod de a ne gândi la asta este că orice se află în partea stângă a funcției atunci când este invocată va fi acest. Aceasta înseamnă că puteți reutiliza spune Nume funcţionează în diferite obiecte şi acest se va referi de fiecare dată la un context complet diferit.

Acum, după cum am menționat mai devreme, acest returnează fereastră obiect atunci când este utilizat în cadrul unei funcții autonome. Acest lucru se datorează faptului că o funcție autonomă este legată de fereastră obiect implicit:

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

Apel vorbi() este la fel cu a suna window.talk(), iar orice se află în partea stângă a funcției va deveni automat acest.

Pe o notă laterală, acest cuvântul cheie din funcție se comportă diferit în Modul strict JavaScript (se intoarce nedefinit). Acesta este, de asemenea, ceva de reținut atunci când utilizați biblioteci UI care folosesc modul strict (de exemplu, React).

Folosind „acest lucru” cu Function.bind()

Pot exista scenarii în care nu puteți adăuga pur și simplu funcția unui obiect ca metodă (ca în ultima secțiune).

Poate că obiectul nu este al tău și îl scoți dintr-o bibliotecă. Obiectul este imuabil, așa că nu îl puteți schimba pur și simplu. În astfel de cazuri, puteți executa în continuare instrucțiunea funcției separat de obiect folosind Function.bind() metodă.

În exemplul următor, spune Nume funcția nu este o metodă pe pe mine obiect, dar tot l-ați legat folosind lega() funcţie:

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

Indiferent de obiectul în care treci lega() va fi folosit ca valoare a acest în acel apel de funcție.

În rezumat, puteți folosi lega() pe orice funcție și trece într-un nou context (un obiect). Și acel obiect va suprascrie sensul lui acest în interiorul acelei funcții.

Folosind „this” cu Function.call()

Ce se întâmplă dacă nu doriți să returnați o funcție complet nouă, ci mai degrabă să apelați funcția după ce o legați de contextul său? Soluția pentru asta este apel() metodă:

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

The apel() metoda execută imediat funcția în loc să returneze o altă funcție.

Dacă funcția necesită un parametru, îl puteți transmite prin intermediul apel() metodă. În exemplul următor, treceți limba către spuneNume() funcția, astfel încât să o puteți folosi pentru a returna condiționat diferite mesaje:

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

După cum puteți vedea, puteți trece orice parametru dorit funcției ca al doilea argument la apel() metodă. De asemenea, puteți trece oricât de mulți parametri doriți.

The aplica() metoda este foarte asemănătoare cu apel() și lega(). Singura diferență este că treceți mai multe argumente, separându-le cu o virgulă cu apel(), în timp ce treceți mai multe argumente într-o matrice cu aplica().

În concluzie, bind(), call() și apply() toate vă permit să apelați funcții cu un obiect complet diferit fără a avea vreo relație între cele două (adică funcția nu este o metodă pe obiect).

„acest” în interiorul funcțiilor constructorului

Dacă apelați o funcție cu a nou cuvânt cheie, creează un acest obiect și îl returnează:

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

În codul de mai sus, ați creat trei obiecte diferite din aceeași funcție. The nou cuvântul cheie creează automat o legătură între obiectul care este creat și acest cuvânt cheie în interiorul funcției.

„acest” în interiorul funcțiilor de apel invers

Funcțiile de apel invers sunt diferit de funcțiile obișnuite. Funcțiile de apel invers sunt funcții pe care le transmiteți unei alte funcții ca argument, astfel încât acestea pot fi executate imediat după ce cea principală a terminat de executat.

The acest cuvântul cheie se referă la un context complet diferit atunci când este utilizat în cadrul funcțiilor de apel invers:

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

După o secundă de apel la persoană funcția de constructor și crearea unei noi pe mine obiect, va înregistra obiectul fereastră ca valoare a acest. Deci, atunci când este utilizat într-o funcție de apel invers, acest se referă la obiectul fereastră și nu la obiectul „construit”.

Există două moduri de a remedia acest lucru. Prima metodă este utilizarea lega() a lega pe persoană funcție la obiectul nou construit:

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

Cu modificarea de mai sus, acest în apel invers va indica același lucru acest ca funcție de constructor (the pe mine obiect).

A doua modalitate de a rezolva problema de acest în funcțiile de apel invers este prin utilizarea funcțiilor săgeți.

„aceasta” Funcții din interiorul săgeții

Funcțiile săgeților sunt diferite de funcțiile obișnuite. Puteți face din funcția de apel invers o funcție săgeată. Cu funcțiile săgeată, nu mai aveți nevoie lega() deoarece se leagă automat la obiectul nou construit:

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

Aflați mai multe despre JavaScript

Ați aflat totul despre cuvântul cheie „acest” și ce înseamnă acesta în toate contextele diferite din JavaScript. Dacă sunteți nou în JavaScript, veți beneficia foarte mult de învățarea tuturor elementelor de bază despre JavaScript și a modului în care funcționează.