JavaScript "tämä"-avainsanan ymmärtäminen

Mitä tekee Tämä avainsana JavaScriptissä tarkoittaa? Ja miten voit käyttää sitä käytännössä JavaScript-ohjelmassasi? Nämä ovat joitain yleisiä kysymyksiä, joita aloittelijat ja jopa jotkut kokeneet JavaScript-kehittäjät kysyvät koskien Tämä avainsana.

Jos olet yksi niistä kehittäjistä, jotka ihmettelevät, mitä Tämä avainsana on kyse, tämä artikkeli on sinua varten. Tutki mitä Tämä viittaa eri yhteyksissä ja tutustu joihinkin hankaluuksiin välttääksesi sekaannukset ja tietysti koodisi bugit.

"tämä" maailmanlaajuisen ulottuvuuden sisällä

Globaalissa kontekstissa Tämä palauttaa ikkuna objektia, kunhan se on funktion ulkopuolella. Globaali konteksti tarkoittaa, että et sijoita sitä funktion sisään.

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

Jos suoritat yllä olevan koodin, saat ikkunaobjektin.

"tämä" sisäiset toiminnot (menetelmät)

Kun sitä käytetään toimintojen sisällä, Tämä viittaa objektiin, johon funktio on sidottu. Poikkeus on, kun käytät Tämä erillisessä funktiossa, jolloin se palauttaa ikkuna esine. Katsotaanpa joitain esimerkkejä.

Seuraavassa esimerkissä sano Nimi toiminto on sisällä minä objekti (eli se on menetelmä). Tällaisissa tapauksissa Tämä viittaa objektiin, joka sisältää funktion.

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

Tämä on minä esine, niin sanotusti Tämä nimi sisällä sano Nimi menetelmä on täsmälleen sama kuin minä.nimi.

Toinen tapa ajatella sitä on, että kaikki, mikä on funktion vasemmalla puolella, kun sitä vedetään, tulee olemaan Tämä. Tämä tarkoittaa, että voit käyttää uudelleen sano Nimi toimivat eri esineissä ja Tämä viittaa joka kerta täysin eri kontekstiin.

Nyt, kuten aiemmin mainittiin, Tämä palauttaa ikkuna objektia, kun sitä käytetään erillisen toiminnon sisällä. Tämä johtuu siitä, että erillinen toiminto on sidottu ikkuna objekti oletuksena:

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

Kutsumus puhua() on sama kuin soittaminen window.talk(), ja kaikki toiminnon vasemmalla puolella olevasta tulee automaattisesti Tämä.

Sivuhuomautuksena, Tämä funktion avainsana käyttäytyy eri tavalla JavaScriptin tiukka tila (se palaa määrittelemätön). Tämä on myös pidettävä mielessä, kun käytät käyttöliittymäkirjastoja, jotka käyttävät tiukkaa tilaa (esim. React).

"Tämän" käyttäminen Function.bind()

Saattaa olla tilanteita, joissa et voi vain lisätä funktiota objektiin menetelmänä (kuten viimeisessä osiossa).

Ehkä esine ei ole sinun ja haet sen kirjastosta. Objekti on muuttumaton, joten et voi vain muuttaa sitä. Tällaisissa tapauksissa voit silti suorittaa funktiokäskyn erillään objektista käyttämällä Function.bind() menetelmä.

Seuraavassa esimerkissä sano Nimi toiminto ei ole menetelmä minä objektia, mutta sidoit sen silti käyttämällä sitoa() toiminto:

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

Mihin tahansa esineeseen menetkin sitoa() käytetään arvona Tämä siinä funktiokutsussa.

Yhteenvetona, voit käyttää sitoa() missä tahansa funktiossa ja passissa uudessa kontekstissa (objektissa). Ja tämä objekti korvaa merkityksen Tämä sen toiminnon sisällä.

"Tämän" käyttäminen Function.call()

Entä jos et halua palauttaa kokonaan uutta funktiota, vaan kutsua funktiota sen jälkeen, kun se on sidottu kontekstiinsa? Ratkaisu siihen on puhelu() menetelmä:

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

The puhelu() menetelmä suorittaa funktion välittömästi toisen funktion palauttamisen sijaan.

Jos toiminto vaatii parametrin, voit välittää sen kautta puhelu() menetelmä. Seuraavassa esimerkissä välität kielen sano nimi() funktio, joten voit käyttää sitä ehdollisesti palauttamaan erilaisia ​​viestejä:

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

Kuten näet, voit vain välittää minkä tahansa parametrin funktiolle toisena argumenttina funktiolle puhelu() menetelmä. Voit myös antaa niin monta parametria kuin haluat.

The Käytä() menetelmä on hyvin samanlainen puhelu() ja sitoa(). Ainoa ero on, että välität useita argumentteja erottamalla ne pilkulla puhelu(), kun taas välität useita argumentteja taulukon sisällä kanssa Käytä().

Yhteenvetona, bind(), call(), and apply() kaikki mahdollistavat funktioiden kutsumisen täysin eri objektilla ilman, että näiden kahden välillä on minkäänlaista suhdetta (eli funktio ei ole objektin menetelmä).

"tämä" Inside Constructor Functions

Jos kutsut funktiota a Uusi avainsana, se luo a Tämä objekti ja palauttaa sen:

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

Yllä olevassa koodissa loit kolme eri objektia samasta funktiosta. The Uusi avainsana luo automaattisesti sidoksen luotavan objektin ja kohteen välille Tämä avainsana funktion sisällä.

"tämä" takaisinsoittotoimintojen sisällä

Takaisinsoittotoiminnot ovat poikkeaa tavallisista toiminnoista. Takaisinsoittofunktiot ovat toimintoja, jotka välität toiselle funktiolle argumenttina, joten ne voidaan suorittaa heti, kun pääfunktio on suoritettu.

The Tämä avainsana viittaa täysin toiseen kontekstiin, kun sitä käytetään takaisinsoittotoimintojen sisällä:

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

Yhden sekunnin soiton jälkeen henkilö rakentajatoiminto ja uuden luominen minä objekti, se kirjaa ikkunaobjektin arvoksi Tämä. Joten kun sitä käytetään takaisinsoittotoiminnossa, Tämä viittaa ikkunaobjektiin eikä "konstruoituun" objektiin.

On kaksi tapaa korjata tämä. Ensimmäinen menetelmä on käyttää sitoa() sitoa henkilö toiminto äskettäin rakennetulle objektille:

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

Yllä olevalla muutoksella Tämä takaisinsoitto osoittaa samaan Tämä konstruktorifunktiona ( minä esine).

Toinen tapa ratkaista ongelma Tämä takaisinsoittotoiminnoissa käyttämällä nuolifunktioita.

"tämä" Inside Arrow Functions

Nuolifunktiot eroavat tavallisista funktioista. Voit tehdä takaisinsoittotoiminnosta nuolitoiminnon. Nuolitoimintojen avulla et enää tarvitse sitoa() koska se sitoutuu automaattisesti juuri rakennettuun objektiin:

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

Lisätietoja JavaScriptistä

Olet oppinut kaiken "tämä"-avainsanasta ja sen merkityksestä JavaScriptin kaikissa eri yhteyksissä. Jos olet uusi JavaScript-käyttäjä, hyödyt suuresti, kun opit kaikki JavaScriptin perusteet ja miten se toimii.