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

Ce înseamnă acest cuvânt cheie în JavaScript? Ș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 despre acest cuvânt cheie.

Dacă sunteți unul dintre acei dezvoltatori care se întreabă despre ce este vorba despre acest cuvânt cheie, atunci acest articol este pentru dvs. Explorați la ce se referă acest lucru în diferite contexte și familiarizați-vă cu unele probleme pentru a evita confuzia și, desigur, erori în codul dvs.

„aceasta” în sfera globală

În context global, aceasta va returna obiectul fereastră 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) 
}
let i = 2
while(i < 10) {
  console.log(this) 
  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, aceasta se referă la obiectul la care este legată funcția. Excepția este atunci când utilizați acest lucru într-o funcție autonomă, caz în care returnează obiectul fereastră. Să vedem câteva exemple.

În exemplul următor, funcția sayName este în interiorul obiectului me (adică este o metodă). În astfel de cazuri, aceasta se referă la obiectul care conține funcția.

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

acesta este obiectul me, așa că rostirea this.name în cadrul metodei sayName este exact aceeași cu me.name.

Un alt mod de a gândi este că orice se află în partea stângă a funcției atunci când este invocată va fi acesta. Aceasta înseamnă că puteți reutiliza funcția sayName în diferite obiecte și aceasta se va referi la un context complet diferit de fiecare dată.

Acum, așa cum am menționat mai devreme, aceasta returnează obiectul fereastră atunci când este utilizat într-o funcție autonomă. Acest lucru se datorează faptului că o funcție autonomă este legată implicit de obiectul fereastră:

 function talk() {
  return this
}
talk() 
 

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

Pe o notă secundară, cuvântul cheie this din funcție se comportă diferit în modul strict JavaScript (returnează nedefinit). Acest lucru 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 încă executa instrucțiunea funcției separat de obiect folosind metoda Function.bind().

În exemplul următor, funcția sayName nu este o metodă pe obiectul me, dar încă o legați folosind funcția bind():

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

Orice obiect pe care îl treceți în bind() va fi folosit ca valoare pentru acest apel în acel apel de funcție.

În rezumat, puteți utiliza bind() pe orice funcție și puteți trece într-un context nou (un obiect). Și acel obiect va suprascrie semnificația acestuia î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 aceasta este metoda call():

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

Metoda call() execută imediat funcția în loc să returneze o altă funcție.

Dacă funcția necesită un parametru, îl puteți transmite prin metoda call(). În exemplul următor, transmiteți limba funcției sayName(), astfel încât să o puteți utiliza pentru a returna în mod condiționat diferite mesaje:

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

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

Metoda apply() este foarte asemănătoare cu call() și bind(). Singura diferență este că treceți mai multe argumente, separându-le cu o virgulă cu call(), în timp ce treceți mai multe argumente într-o matrice cu apply().

În rezumat, bind(), call() și apply() 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 un cuvânt cheie nou, acesta creează un obiect this și îl returnează:

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

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

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

Funcțiile de apel invers sunt diferite 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.

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

 function person(name){
  this.name = name
  setTimeout(function() {
    console.log(this)
  }, 1000)
}
const me = new person("Kingsley") 
 

După o secundă de apelare a funcției de constructor persoană și de a crea un nou obiect me, acesta va înregistra obiectul fereastră ca valoare a acestuia. Deci, atunci când este utilizat într-o funcție de apel invers, aceasta se referă la obiectul fereastră și nu la obiectul „construit”.

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

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

Cu modificarea de mai sus, aceasta din callback va indica același lucru ca și funcția constructor (obiectul me).

A doua modalitate de a rezolva problema acestui lucru în funcțiile de apel invers este utilizarea funcțiilor săgeată.

„acest” în interiorul funcțiilor 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 de bind() deoarece se leagă automat la obiectul nou construit:

 function person(name){
  this.name = name
  setTimeout(() => {
    console.log(this)
  }, 1000)
}
const me = new person("Kingsley") 
 

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ă.