Pochopenie kľúčového slova JavaScript „toto“.

Čo robí toto kľúčové slovo v JavaScripte znamená? A ako ho môžete prakticky využiť vo svojom JavaScript programe? Toto sú niektoré z bežných otázok, ktoré kladú nováčikovia a dokonca aj niektorí skúsení vývojári JavaScriptu toto kľúčové slovo.

Ak ste jedným z tých vývojárov, ktorí sa pýtajú, čo toto Kľúčové slovo je o všetkom, potom je tento článok určený práve vám. Preskúmajte čo toto odkazuje v rôznych kontextoch a oboznámte sa s niektorými problémami, aby ste sa vyhli nejasnostiam a samozrejme chybám vo vašom kóde.

"toto" v rámci globálneho rozsahu

V globálnom kontexte toto vráti okno objekt, pokiaľ je mimo funkcie. Globálny kontext znamená, že ho neumiestňujete do funkcie.

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

Ak spustíte vyššie uvedený kód, získate objekt okna.

"toto" vnútorné funkcie (metódy)

Pri použití vo vnútri funkcií, toto odkazuje na objekt, na ktorý je funkcia viazaná. Výnimkou je, keď používate toto v samostatnej funkcii, v takom prípade vráti okno objekt. Pozrime sa na niekoľko príkladov.

V nasledujúcom príklade je povedzme meno funkcia je vo vnútri ja objekt (t. j. je to metóda). V prípadoch ako je tento, toto odkazuje na objekt obsahujúci funkciu.

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

toto je ja objekt, takpovediac toto.meno vnútri povedzme meno metóda je úplne rovnaká ako ja.meno.

Ďalší spôsob, ako si to predstaviť, je, že čokoľvek je pri vyvolaní na ľavej strane funkcie, bude toto. To znamená, že môžete znova použiť povedzme meno fungujú v rôznych objektoch a toto bude zakaždým odkazovať na úplne iný kontext.

Teraz, ako už bolo spomenuté, toto vráti okno objekt pri použití v rámci samostatnej funkcie. Je to preto, že samostatná funkcia je viazaná na okno objekt predvolene:

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

Volanie hovoriť () je to isté ako volanie window.talk()a všetko, čo je na ľavej strane funkcie, sa automaticky stane toto.

Na okraj, toto kľúčové slovo vo funkcii sa správa inak Prísny režim JavaScriptu (vracia sa nedefinované). Toto je tiež niečo, čo treba mať na pamäti, keď používate knižnice používateľského rozhrania, ktoré používajú striktný režim (napr. React).

Použitie „tohto“ pomocou funkcie Function.bind()

Môžu existovať scenáre, v ktorých nemôžete len pridať funkciu do objektu ako metódu (ako v poslednej časti).

Možno ten predmet nie je váš a vy ho vyťahujete z knižnice. Objekt je nemenný, takže ho nemôžete len tak zmeniť. V prípadoch, ako je tento, stále môžete vykonať príkaz funkcie oddelene od objektu pomocou Function.bind() metóda.

V nasledujúcom príklade je povedzme meno funkcia nie je metóda na ja objekt, ale stále ste ho viazali pomocou bind() funkcia:

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

Bez ohľadu na objekt, do ktorého prejdete bind() sa použije ako hodnota toto v tomto volaní funkcie.

Stručne povedané, môžete použiť bind() na ľubovoľnú funkciu a odovzdať v novom kontexte (objekt). A tento objekt prepíše význam toto vnútri tejto funkcie.

Použitie „tohto“ pomocou funkcie Function.call()

Čo ak nechcete vrátiť úplne novú funkciu, ale radšej len zavoláte funkciu po naviazaní na jej kontext? Riešením na to je hovor() metóda:

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

The hovor() metóda okamžite vykoná funkciu namiesto toho, aby vrátila inú funkciu.

Ak funkcia vyžaduje parameter, môžete ho odovzdať cez hovor() metóda. V nasledujúcom príklade odovzdávate jazyk do sayName() funkciu, takže ju môžete použiť na podmienené vrátenie rôznych správ:

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

Ako vidíte, môžete funkcii odovzdať ľubovoľný parameter, ktorý chcete, ako druhý argument hovor() metóda. Môžete tiež zadať toľko parametrov, koľko chcete.

The použiť() metóda je veľmi podobná hovor() a bind(). Jediný rozdiel je v tom, že viacero argumentov odovzdávate tak, že ich oddelíte čiarkou s hovor(), zatiaľ čo do poľa odovzdávate viacero argumentov s použiť().

v súhrne bind(), call() a apply() všetky vám umožňujú volať funkcie s úplne iným objektom bez toho, aby medzi nimi existoval nejaký vzťah (t. j. funkcia nie je metódou na objekte).

"toto" vo vnútri funkcií konštruktéra

Ak zavoláte funkciu s a Nový kľúčové slovo, vytvorí a toto objekt a vráti ho:

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

Vo vyššie uvedenom kóde ste vytvorili tri rôzne objekty z rovnakej funkcie. The Nový kľúčové slovo automaticky vytvorí väzbu medzi objektom, ktorý sa vytvára, a objektom toto kľúčové slovo vo funkcii.

"toto" vo vnútri funkcií spätného volania

Funkcie spätného volania sú odlišné od bežných funkcií. Funkcie spätného volania sú funkcie, ktoré odovzdávate inej funkcii ako argument, takže môžu byť spustené ihneď po dokončení hlavnej funkcie.

The toto kľúčové slovo odkazuje na úplne iný kontext, keď sa používa vo funkciách spätného volania:

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

Po jednej sekunde volania na osoba funkcia konštruktora a vytvorenie nového ja objekt, zaznamená objekt okna ako hodnotu toto. Takže pri použití vo funkcii spätného volania toto odkazuje na objekt okna a nie na „vytvorený“ objekt.

Sú dva spôsoby, ako to opraviť. Prvý spôsob je použitie bind() zviazať osoba funkcia pre novovybudovaný objekt:

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

S vyššie uvedenou úpravou, toto v spätnom volaní bude ukazovať na to isté toto ako funkcia konštruktora ( ja objekt).

Druhý spôsob riešenia problému toto vo funkciách spätného volania je pomocou funkcií šípok.

"toto" funkcie vnútornej šípky

Funkcie šípok sa líšia od bežných funkcií. Funkciu spätného volania môžete zmeniť na funkciu šípky. S funkciami šípok už nepotrebujete bind() pretože sa automaticky viaže na novovytvorený objekt:

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

Zistite viac o JavaScripte

Dozvedeli ste sa všetko o kľúčovom slove „toto“ a o tom, čo znamená vo všetkých rôznych kontextoch v JavaScripte. Ak s JavaScriptom začínate, budete mať veľký úžitok z toho, že sa naučíte všetky základy JavaScriptu a ako funguje.