„JavaScript“ raktinio žodžio „šis“ supratimas

Ką daro tai „JavaScript“ reiškia raktinį žodį? Ir kaip jūs galite jį praktiškai panaudoti savo JavaScript programoje? Tai yra keletas dažniausiai pasitaikančių klausimų, kuriuos užduoda naujokai ir net kai kurie patyrę „JavaScript“ kūrėjai tai raktažodį.

Jei esate vienas iš tų kūrėjų, kuriems įdomu, kas tai raktinį žodį, tai šis straipsnis skirtas jums. Ištirti ką tai nurodo skirtinguose kontekstuose ir susipažinkite su kai kuriomis problemomis, kad išvengtumėte painiavos ir, žinoma, kodo klaidų.

„tai“ pasaulinio masto viduje

Pasauliniame kontekste, tai grąžins langas objektą, kol jis yra už funkcijos ribų. Visuotinis kontekstas reiškia, kad jo neįtraukiate į funkciją.

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

Jei paleisite aukščiau pateiktą kodą, gausite lango objektą.

„tai“ vidinės funkcijos (metodai)

Kai naudojamas funkcijų viduje, tai nurodo objektą, su kuriuo susieta funkcija. Išimtis yra tada, kai naudojate tai atskiroje funkcijoje, tokiu atveju ji grąžina langas objektas. Pažiūrėkime keletą pavyzdžių.

Toliau pateiktame pavyzdyje pasakytiVardas funkcija yra viduje aš objektas (t. y. tai metodas). Tokiais atvejais, kaip šis, tai nurodo objektą, kuriame yra funkcija.

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

tai yra aš objektas, taip sakant tai.vardas viduje pasakytiVardas metodas yra lygiai toks pat kaip aš.vardas.

Kitas būdas galvoti yra tai, kad viskas, kas yra kairėje funkcijos pusėje, kai bus iškviesta, bus tai. Tai reiškia, kad galite pakartotinai naudoti pasakytiVardas funkcionuoti skirtinguose objektuose ir tai kaskart nurodys visiškai skirtingą kontekstą.

Dabar, kaip minėta anksčiau, tai grąžina langas objektas, kai naudojamas atskiroje funkcijoje. Taip yra todėl, kad atskira funkcija yra susieta su langas objektas pagal numatytuosius nustatymus:

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

Skambina kalbėti () yra tas pats, kas skambinti window.talk(), ir viskas, kas yra kairėje funkcijos pusėje, automatiškai taps tai.

Kita vertus, tai raktinis žodis funkcijoje elgiasi kitaip „JavaScript“ griežtas režimas (jis grįžta neapibrėžtas). Tai taip pat reikia turėti omenyje, kai naudojate vartotojo sąsajos bibliotekas, kuriose naudojamas griežtas režimas (pvz., „React“).

„Šis“ naudojimas su Function.bind()

Gali būti scenarijų, kai negalite tiesiog pridėti funkcijos prie objekto kaip metodo (kaip paskutiniame skyriuje).

Galbūt objektas nėra jūsų ir imate jį iš bibliotekos. Objektas yra nekintantis, todėl jūs negalite jo tiesiog pakeisti. Tokiais atvejais funkcijos sakinį vis tiek galite vykdyti atskirai nuo objekto naudodami Function.bind() metodas.

Toliau pateiktame pavyzdyje pasakytiVardas funkcija nėra metodas aš objektą, bet vis tiek susiejote jį naudodami įpareigoti() funkcija:

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

Kad ir į kokį objektą įeitumėte įpareigoti() bus naudojama kaip vertė tai tame funkcijos iškvietime.

Apibendrinant, galite naudoti įpareigoti() bet kurią funkciją ir pereiti naujame kontekste (objekte). Ir tas objektas perrašys reikšmę tai tos funkcijos viduje.

„This“ naudojimas su Function.call()

Ką daryti, jei nenorite grąžinti visiškai naujos funkcijos, o tiesiog iškviečiate funkciją susieję ją su kontekstu? Sprendimas tam yra skambinti () metodas:

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

The skambinti () metodas iš karto vykdo funkciją, o ne grąžina kitą funkciją.

Jei funkcijai reikalingas parametras, galite jį perduoti per skambinti () metodas. Šiame pavyzdyje kalbą perduodate pasakytiVardas() funkcija, todėl galite ją naudoti norėdami sąlygiškai grąžinti skirtingus pranešimus:

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

Kaip matote, bet kurį norimą parametrą galite tiesiog perduoti funkcijai kaip antrąjį argumentą skambinti () metodas. Taip pat galite perduoti tiek parametrų, kiek norite.

The taikyti () metodas yra labai panašus į skambinti () ir įpareigoti(). Vienintelis skirtumas yra tas, kad kelis argumentus perduodate atskirdami juos kableliu su skambinti (), tuo tarpu masyve perduodate kelis argumentus su taikyti ().

Apibendrinant, bind(), call() ir taikyti() visi jie leidžia iškviesti funkcijas su visiškai kitu objektu, neturėdami jokio ryšio tarp jų (t. y. funkcija nėra objekto metodas).

„šios“ vidinės konstruktoriaus funkcijos

Jei iškviečiate funkciją su a naujas raktinį žodį, jis sukuria a tai objektą ir grąžina jį:

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

Aukščiau pateiktame kode sukūrėte tris skirtingus objektus iš tos pačios funkcijos. The naujas raktinis žodis automatiškai sukuria susiejimą tarp kuriamo objekto ir objekto tai raktinis žodis funkcijos viduje.

„šios“ vidinės atgalinio skambučio funkcijos

Atskambinimo funkcijos yra skiriasi nuo įprastų funkcijų. Atšaukimo funkcijos yra funkcijos, kurias kaip argumentą perduodate kitai funkcijai, todėl jas galima vykdyti iškart po to, kai baigia vykdyti pagrindinę funkciją.

The tai raktinis žodis reiškia visiškai kitą kontekstą, kai naudojamas atgalinio skambinimo funkcijose:

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

Po vienos sekundės paskambinus asmuo konstruktoriaus funkciją ir sukurti naują aš objektą, jis užregistruos lango objektą kaip reikšmę tai. Taigi, kai naudojamas atgalinio skambučio funkcijoje, tai nurodo lango objektą, o ne „sukonstruotą“ objektą.

Yra du būdai tai išspręsti. Pirmasis metodas naudojamas įpareigoti() surišti asmuo funkcija naujai pastatytam objektui:

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

Su aukščiau pateikta modifikacija, tai per skambutį nurodys tą patį tai kaip konstruktoriaus funkcija ( aš objektas).

Antrasis būdas išspręsti problemą tai atgalinio skambinimo funkcijose yra naudojant rodyklių funkcijas.

„šios“ rodyklės viduje funkcijos

Rodyklės funkcijos skiriasi nuo įprastų funkcijų. Galite pakeisti skambinimo funkciją kaip rodyklės funkciją. Su rodyklių funkcijomis jums nebereikia įpareigoti() nes jis automatiškai susieja su naujai sukurtu objektu:

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

Sužinokite daugiau apie „JavaScript“.

Sužinojote viską apie raktinį žodį „šis“ ir ką jis reiškia įvairiuose „JavaScript“ kontekstuose. Jei nesate „JavaScript“ naujokas, jums bus labai naudinga išmokti visus „JavaScript“ pagrindus ir kaip jis veikia.