JavaScripti "selle" märksõna mõistmine

Mida teeb see tähendab JavaScripti märksõna? Ja kuidas saate seda oma JavaScripti programmis praktiliselt kasutada? Need on mõned levinumad küsimused, mida algajad ja isegi mõned kogenud JavaScripti arendajad selle kohta küsivad see märksõna.

Kui olete üks neist arendajatest, kes mõtleb, mis see märksõna, siis on see artikkel teie jaoks. Uurige, mida see viitab erinevates kontekstides ja tutvuge mõne tõrkega, et vältida segadust ja loomulikult oma koodi vigu.

"see" globaalse ulatuse sees

Globaalses kontekstis see tagastab aken objekti, kui see on väljaspool funktsiooni. Globaalne kontekst tähendab, et te ei aseta seda funktsiooni sisse.

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

Kui käivitate ülaltoodud koodi, saate aknaobjekti.

"see" sisemised funktsioonid (meetodid)

Kui seda kasutatakse funktsioonide sees, see viitab objektile, millega funktsioon on seotud. Erandiks on siis, kui kasutate see eraldiseisvas funktsioonis, sel juhul tagastab see aken objektiks. Vaatame mõnda näidet.

Järgmises näites on ütleNimi funktsioon on sees mina objekt (st see on meetod). Sellistel juhtudel see viitab funktsiooni sisaldavale objektile.

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

see on mina objekt, nii öeldes see.nimi sees ütleNimi meetod on täpselt sama, mis mina.nimi.

Teine võimalus mõelda on see, et kõik, mis on funktsiooni käivitamisel vasakul küljel, on see see. See tähendab, et saate seda uuesti kasutada ütleNimi toimima erinevates objektides ja see viitab iga kord täiesti erinevale kontekstile.

Nüüd, nagu varem mainitud, see tagastab aken objekt, kui seda kasutatakse eraldiseisva funktsiooni sees. Selle põhjuseks on asjaolu, et eraldiseisev funktsioon on seotud aken vaikimisi objekt:

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

Helistamine räägi () on sama mis helistamine window.talk()ja kõik, mis on funktsiooni vasakus servas, muutub automaatselt see.

Vahemärkusena võib öelda, et see funktsioonis olev märksõna käitub erinevalt JavaScripti range režiim (see naaseb määratlemata). Seda tuleb meeles pidada ka siis, kui kasutate ranget režiimi kasutavaid kasutajaliidese teeke (nt React).

"Selle" kasutamine funktsiooniga Function.bind()

Võib esineda stsenaariume, kus te ei saa funktsiooni objektile lihtsalt meetodina lisada (nagu viimases jaotises).

Võib-olla pole objekt teie oma ja te tõmbate selle raamatukogust. Objekt on muutumatu, nii et te ei saa seda lihtsalt muuta. Sellistel juhtudel saate siiski funktsioonilause käivitada objektist eraldi, kasutades Function.bind() meetod.

Järgmises näites on ütleNimi funktsioon ei ole meetod mina objekti, kuid sidusite selle siiski kasutades bind() funktsioon:

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

Ükskõik millisesse objekti sa sisened bind() kasutatakse väärtusena see selles funktsioonikutses.

Kokkuvõttes võite kasutada bind() mis tahes funktsioonil ja uues kontekstis (objektis). Ja see objekt kirjutab tähenduse üle see selle funktsiooni sees.

"Selle" kasutamine funktsiooniga Function.call()

Mis siis, kui te ei soovi tagastada täiesti uut funktsiooni, vaid kutsute funktsiooni pärast kontekstiga sidumist? Lahendus sellele on helistama() meetod:

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

The helistama() meetod käivitab selle funktsiooni kohe, selle asemel, et tagastada mõni muu funktsioon.

Kui funktsioon nõuab parameetrit, saate selle edastada helistama() meetod. Järgmises näites edastate keele domeenile ütleNimi() funktsiooni, nii et saate seda kasutada erinevate sõnumite tingimuslikuks tagastamiseks:

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

Nagu näete, saate funktsioonile teise argumendina edastada mis tahes soovitud parameetri helistama() meetod. Samuti saate edastada nii palju parameetreid, kui soovite.

The rakenda () meetod on väga sarnane helistama() ja bind(). Ainus erinevus on see, et edastate mitu argumenti, eraldades need komaga helistama(), samas kui massiivi sees edastate mitu argumenti nupuga rakenda ().

Kokkuvõttes, bind(), call() ja apply() kõik võimaldavad teil kutsuda funktsioone täiesti erineva objektiga, ilma et neil oleks mingit seost (st funktsioon ei ole objektil olev meetod).

"see" konstruktori sisemised funktsioonid

Kui kutsute funktsiooni a-ga uus märksõna, loob see a see objekti ja tagastab selle:

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

Ülaltoodud koodis lõite sama funktsiooniga kolm erinevat objekti. The uus märksõna loob automaatselt sideme loodava objekti ja objekti vahel see märksõna funktsiooni sees.

"see" tagasihelistamisfunktsioonide sees

Tagasihelistamise funktsioonid on erineb tavalistest funktsioonidest. Tagasihelistamise funktsioonid on funktsioonid, mille edastate argumendina teisele funktsioonile, nii et neid saab käivitada kohe pärast seda, kui põhifunktsioon on täitmise lõpetanud.

The see Märksõna viitab tagasihelistamise funktsioonides kasutamisel täiesti erinevale kontekstile:

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

Pärast sekundilist helistamist inimene konstruktori funktsioon ja uue loomine mina objekti, logib see aknaobjekti väärtusena see. Nii et kui seda kasutatakse tagasihelistamisfunktsioonis, see viitab aknaobjektile, mitte "konstrueeritud" objektile.

Selle parandamiseks on kaks võimalust. Esimene meetod on kasutamine bind() siduda inimene funktsioon vastvalminud objektile:

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

Ülaltoodud muudatusega see tagasihelistamisel osutab samale see konstruktorifunktsioonina ( mina objekt).

Teine viis probleemi lahendamiseks see tagasihelistamisfunktsioonides on noolefunktsioonide kasutamine.

"see" noole sisemised funktsioonid

Noolefunktsioonid erinevad tavalistest funktsioonidest. Saate muuta oma tagasihelistamise funktsiooni noolefunktsiooniks. Noolefunktsioonidega pole teil enam vaja bind() sest see seostub automaatselt vastloodud objektiga:

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

Lisateave JavaScripti kohta

Olete õppinud kõike märksõna "selle" kohta ja seda, mida see JavaScripti erinevates kontekstides tähendab. Kui olete JavaScripti uus kasutaja, on teil palju kasu, kui õppida JavaScripti põhitõdesid ja selle toimimist.