A JavaScript "ez" kulcsszó megértése

Mit csinál a ez kulcsszó a JavaScriptben azt jelenti? É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 ez kulcsszó.

Ha Ön azon fejlesztők közé tartozik, akik kíváncsiak, mi a ez kulcsszóról szól, akkor ez a cikk neked szól. Fedezze fel, mit ez különböző kontextusokban hivatkozik, é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 összefüggésben ez visszaadja a ablak objektum, 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) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 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 utal, amelyhez a függvény kötődik. A kivétel az, amikor használja ez önálló függvényben, ebben az esetben a ablak tárgy. Lássunk néhány példát.

A következő példában a mondd Name funkció a nekem objektum (vagyis ez egy metódus). Ilyen esetekben pl. ez a függvényt tartalmazó objektumra utal.

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

ez az a nekem tárgy, így szólva ez a név benne mondd Name módszer pontosan ugyanaz, mint én.név.

Egy másik módja ennek az, hogy bármi, ami a függvény bal oldalán található, amikor meghívják, az az is lesz ez. Ez azt jelenti, hogy újra felhasználhatja a mondd Name funkció különböző tárgyakban és ez minden alkalommal teljesen más kontextusra fog hivatkozni.

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

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

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

Mellékesen megjegyzem, a ez kulcsszó a függvényben másként viselkedik A JavaScript szigorú módja (visszatér határozatlan). Ezt akkor is szem előtt kell tartani, ha szigorú módot használó felhasználói felület-könyvtárakat (pl. React) használ.

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. Az ilyen esetekben továbbra is végrehajthatja a függvény utasítást az objektumtól elkülönítve a Function.bind() módszer.

A következő példában a mondd Name függvény nem módszer a nekem objektumot, de még mindig bekötötte a bind() funkció:

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

Bármilyen tárgyba is lépsz bele bind() értékeként kerül felhasználásra ez abban a függvényhívásban.

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

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 az hívás() módszer:

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

A hívás() metódus azonnal végrehajtja a függvényt egy másik függvény visszaadása helyett.

Ha a függvény paramétert igényel, akkor azt a következőn keresztül adhatja át hívás() módszer. A következő példában átadja a nyelvet a monddName() függvényt, így használhatja különböző üzenetek feltételes visszaküldésére:

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

Amint láthatja, egyszerűen átadhat bármilyen paramétert a függvénynek második argumentumként a hívás() módszer. Tetszőleges számú paramétert is megadhat.

A alkalmaz() módszer nagyon hasonló hívás() és bind(). Az egyetlen különbség az, hogy több argumentumot ad meg úgy, hogy vesszővel választja el őket a következővel hívás(), míg egy tömbön belül több argumentumot ad át a -val alkalmaz().

Összefoglalva, bind(), call(), és alkalmaz() mindegyik lehetővé teszi, 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" Inside Constructor Functions

Ha egy függvényt a-val hívunk meg új kulcsszót, létrehoz egy ez objektumot, és visszaadja:

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

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

"ez" belső visszahívási funkciók

A visszahívási funkciók eltér 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.

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

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

Egy másodperces felhívás után a személy konstruktor függvényt és újat hozunk létre nekem objektum értékeként naplózza az ablak objektumot ez. Tehát ha visszahívási funkcióban használjuk, ez az ablak objektumra vonatkozik, és nem a "konstruált" objektumra.

Ennek két módja van. Az első módszer a használata bind() megkötni a személy függvény az újonnan épített objektumhoz:

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

A fenti módosítással ez a visszahívásban ugyanerre fog mutatni ez mint a konstruktor függvény (a nekem tárgy).

A probléma megoldásának második módja ez a visszahívási függvényekben nyílfüggvények használatával történik.

„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íl funkciókkal már nincs szüksége bind() mert automatikusan kötődik az újonnan felépített objektumhoz:

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

Tudjon meg többet a JavaScriptről

Mindent megtudott az "ez" kulcsszóról és arról, hogy mit jelent a JavaScript különféle 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.