A JavaScript „ez” kulcsszó megértése

Mit jelent ez a kulcsszó a JavaScriptben? És hogyan tudod gyakorlatilag használni a JavaScript programodban? Ez néhány gyakori kérdés, amelyet az újoncok és még néhány tapasztalt JavaScript-fejlesztő is feltesz a kulcsszóval kapcsolatban.

Ha Ön azon fejlesztők közé tartozik, akik kíváncsiak, miről is szól ez a kulcsszó, akkor ez a cikk az Ön számára készült. Fedezze fel, mire vonatkozik ez a különböző kontextusokban, és ismerkedjen meg néhány hibával, hogy elkerülje a félreértést, és természetesen a kódban lévő hibákat.

„ez” a globális hatókörön belül

Globális környezetben ez visszaadja az ablak objektumot, amíg az kívül esik egy függvényen. A globális kontextus azt jelenti, hogy nem helyezi el egy függvényen belül.

 if(true) {
  console.log(this) 
}
let i = 2
while(i < 10) {
  console.log(this) 
  i++
}
 

Ha futtatja a fenti kódot, akkor megkapja az ablak objektumot.

„Ez” belső funkciók (módszerek)

Ha függvényeken belül használjuk, ez arra az objektumra vonatkozik, amelyhez a függvény kötve van. Ez alól kivétel az, ha ezt egy önálló függvényben használja, amikor is az ablak objektumot adja vissza. Lássunk néhány példát.

A következő példában a sayName függvény a me objektumon belül található (azaz egy metódus). Ilyen esetekben ez a függvényt tartalmazó objektumra vonatkozik.

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

ez a me objektum, így a this.name kimondása a sayName metóduson belül pontosan ugyanaz, mint a me.name.

Egy másik módja annak, hogy ezt úgy gondoljuk, hogy ami a függvény bal oldalán található, amikor meghívjuk, az ez lesz. Ez azt jelenti, hogy a sayName függvényt újra felhasználhatja különböző objektumokban, és ez minden alkalommal teljesen más kontextusra fog hivatkozni.

Most, ahogy korábban említettük, ez visszaadja az ablak objektumot, ha önálló függvényen belül használják. Ennek az az oka, hogy egy önálló függvény alapértelmezés szerint az ablakobjektumhoz van kötve:

 function talk() {
  return this
}
talk() 
 

A talk() hívása ugyanaz, mint a window.talk(), és minden, ami a függvény bal oldalán található, automatikusan azzá válik.

Megjegyzendő, hogy a függvényben szereplő this kulcsszó másként viselkedik a JavaScript szigorú módjában (undefined értékkel tér vissza). Ezt akkor is érdemes szem előtt tartani, ha szigorú módot használó felhasználói felületi könyvtárakat használ (pl. React).

A „this” használata a Function.bind() funkcióval

Előfordulhatnak olyan forgatókönyvek, amikor nem csak metódusként adhatja hozzá a függvényt egy objektumhoz (mint az utolsó részben).

Lehet, hogy az objektum nem a tiéd, és egy könyvtárból húzza ki. Az objektum megváltoztathatatlan, így nem lehet csak úgy megváltoztatni. Ilyen esetekben továbbra is végrehajthatja a függvény utasítást az objektumtól elkülönítve a Function.bind() metódussal.

A következő példában a sayName függvény nem metódus a me objektumon, de a bind() függvénnyel továbbra is kötöd:

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

Bármilyen objektumot is adunk át a bind()-be, az ennek értéke lesz a függvényhívásban.

Összefoglalva, használhatja a bind()-et bármely függvényen, és átadhatja egy új kontextusban (egy objektumban). És ez az objektum felülírja ennek a funkción belüli jelentését.

A „this” használata a Function.call() funkcióval

Mi a teendő, ha nem egy teljesen új függvényt szeretne visszaadni, hanem egyszerűen meghívja a függvényt, miután a környezetéhez kötötte? A megoldás erre a call() metódus:

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

A call() metódus azonnal végrehajtja a függvényt ahelyett, hogy egy másik függvényt adna vissza.

Ha a függvénynek paraméterre van szüksége, akkor azt a call() metóduson keresztül adhatja át. A következő példában a nyelvet a sayName() függvénynek adja át, így használhatja különböző üzenetek feltételes visszaadására:

 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') 
 

Amint láthatja, a call() metódus második argumentumaként bármely kívánt paramétert átadhat a függvénynek. Tetszőleges számú paramétert is megadhat.

Az apply() metódus nagyon hasonlít a call() és bind() metódusokhoz. Az egyetlen különbség az, hogy több argumentumot ad meg úgy, hogy vesszővel választja el őket a call()-al, míg egy tömbön belül több argumentumot ad át az apply()-lel.

Összefoglalva, a bind(), a call() és az apply() mind lehetővé teszik, hogy függvényeket hívjunk meg egy teljesen más objektummal anélkül, hogy bármiféle kapcsolat lenne a kettő között (azaz a függvény nem metódus az objektumon).

„ez” a konstruktor függvények belsejében

Ha egy függvényt új kulcsszóval hív meg, az létrehoz egy ezt az objektumot, és visszaadja:

 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 
 

A fenti kódban három különböző objektumot hozott létre ugyanabból a függvényből. Az új kulcsszó automatikusan kötést hoz létre a létrehozandó objektum és a függvényen belüli ez kulcsszó között.

„ez” a visszahívási funkciókon belül

A visszahívási funkciók eltérnek a normál funkcióktól. A visszahívási függvények olyan függvények, amelyeket argumentumként adunk át egy másik függvénynek, így azonnal végrehajthatók, miután a fő függvény végrehajtása befejeződött.

Ez a kulcsszó egy teljesen más kontextusra utal, ha a visszahívási függvényeken belül használják:

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

Egy másodperccel a person konstruktor függvény meghívása és egy új me objektum létrehozása után az ablak objektumot ennek értékeként naplózza. Tehát amikor visszahívási függvényben használjuk, ez az ablak objektumra vonatkozik, nem pedig a „konstruált” objektumra.

Ennek két módja van. Az első módszer a bind() segítségével köti össze a személy függvényt az újonnan szerkesztett objektumhoz:

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

A fenti módosítással ez a visszahívásban ugyanarra fog mutatni erre, mint a konstruktor függvény (a me objektum).

A visszahívási függvényekben a probléma megoldásának második módja a nyíl függvények használata.

„ez a belső nyíl” funkciói

A nyílfüggvények eltérnek a normál függvényektől. A visszahívási funkciót nyílfunkcióvá alakíthatja. A nyílfüggvényeknél már nincs szükség a bind()-re, mert az automatikusan kötődik az újonnan felépített objektumhoz:

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

Tudjon meg többet a JavaScriptről

Mindent megtudott a „this” kulcsszóról, és arról, hogy mit jelent a JavaScript különböző kontextusaiban. Ha még nem ismeri a JavaScriptet, nagy hasznot húzhat abból, ha megtanulja a JavaScript alapjait és működését.