Pochopení JavaScriptového klíčového slova „toto“.

Co dělá tento klíčové slovo v JavaScriptu znamená? A jak jej můžete prakticky využít ve svém JavaScript programu? To jsou některé z běžných otázek, na které se ptají nováčci a dokonce i někteří zkušení vývojáři JavaScriptu tento klíčové slovo.

Pokud jste jedním z těch vývojářů, kteří se zajímají o co tento Klíčové slovo je o všem, pak je tento článek určen právě vám. Prozkoumat co tento odkazuje v různých kontextech a seznamte se s některými problémy, abyste se vyhnuli zmatkům a samozřejmě chybám ve vašem kódu.

"toto" uvnitř globálního rozsahu

V globálním kontextu tento vrátí okno objekt, pokud je mimo funkci. Globální kontext znamená, že jej nevkládáte do funkce.

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

Pokud spustíte výše uvedený kód, získáte objekt okna.

"toto" vnitřní funkce (metody)

Při použití uvnitř funkcí, tento odkazuje na objekt, ke kterému je funkce vázána. Výjimkou je, když používáte tento v samostatné funkci, v takovém případě vrátí okno objekt. Podívejme se na několik příkladů.

V následujícím příkladu je řekni jméno funkce je uvnitř mě objekt (tj. je to metoda). V případech jako je tento, tento odkazuje na objekt obsahující funkci.

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

tento je mě objekt, tak říkajíc tohle jméno uvnitř řekni jméno metoda je úplně stejná jako já.jméno.

Jiný způsob, jak si to představit, je, že cokoli je při vyvolání na levé straně funkce, bude tento. To znamená, že můžete znovu použít řekni jméno fungovat v různých objektech a tento bude pokaždé odkazovat na úplně jiný kontext.

Nyní, jak již bylo zmíněno, tento vrátí okno objekt při použití uvnitř samostatné funkce. Je to proto, že samostatná funkce je vázána na okno objekt ve výchozím nastavení:

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

Povolání mluvit() je stejné jako volání window.talk()a vše, co je na levé straně funkce, se automaticky stane tento.

Na okraj, tento klíčové slovo ve funkci se chová jinak Přísný režim JavaScriptu (vrací se nedefinováno). To je také něco, co je třeba mít na paměti, když používáte knihovny uživatelského rozhraní, které používají přísný režim (např. React).

Použití „toto“ pomocí Function.bind()

Mohou existovat scénáře, kdy nemůžete pouze přidat funkci k objektu jako metodu (jako v poslední části).

Možná ten předmět není váš a vy ho vytahujete z knihovny. Objekt je neměnný, takže ho nemůžete jen tak změnit. V případech, jako je tento, můžete stále provádět příkaz funkce odděleně od objektu pomocí Function.bind() metoda.

V následujícím příkladu je řekni jméno funkce není metoda na mě objekt, ale stále jste jej svázali pomocí svázat() funkce:

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

Ať už vstoupíte do jakéhokoli předmětu svázat() bude použita jako hodnota tento v tomto volání funkce.

Stručně řečeno, můžete použít svázat() na jakoukoli funkci a předat v novém kontextu (objektu). A tento objekt přepíše význam tento uvnitř té funkce.

Použití "toto" pomocí Function.call()

Co když nechcete vrátit úplně novou funkci, ale raději funkci zavoláte poté, co ji navážete na její kontext? Řešením pro to je volání() metoda:

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

The volání() metoda okamžitě provede funkci namísto vrácení jiné funkce.

Pokud funkce vyžaduje parametr, můžete jej předat přes volání() metoda. V následujícím příkladu předáváte jazyk do sayName() funkce, takže ji můžete použít k podmíněnému vrácení různých zprá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

Jak vidíte, můžete funkci předat libovolný parametr, který chcete, jako druhý argument do volání() metoda. Můžete také předat tolik parametrů, kolik chcete.

The aplikovat() metoda je velmi podobná volání() a svázat(). Jediný rozdíl je v tom, že předáte více argumentů tak, že je oddělíte čárkou s volání(), zatímco předáte více argumentů uvnitř pole s aplikovat().

Celkem, bind(), call() a apply() všechny vám umožňují volat funkce s úplně jiným objektem, aniž byste mezi nimi měli jakýkoli vztah (tj. funkce není metodou na objektu).

"toto" uvnitř funkcí konstruktoru

Pokud zavoláte funkci s a Nový klíčové slovo, vytvoří a tento objekt a vrátí jej:

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

Ve výše uvedeném kódu jste vytvořili tři různé objekty ze stejné funkce. The Nový klíčové slovo automaticky vytvoří vazbu mezi vytvářeným objektem a objektem tento klíčové slovo uvnitř funkce.

"toto" uvnitř funkcí zpětného volání

Funkce zpětného volání jsou odlišné od běžných funkcí. Funkce zpětného volání jsou funkce, které předáváte jiné funkci jako argument, takže je lze spustit ihned po dokončení hlavní funkce.

The tento klíčové slovo odkazuje na zcela odlišný kontext, když je použito uvnitř funkcí zpětného volání:

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

Po jedné sekundě volání osoba funkce konstruktoru a vytvoření nové mě objekt, zaprotokoluje objekt okna jako hodnotu tento. Takže při použití ve funkci zpětného volání, tento odkazuje na objekt okna a ne na "konstruovaný" objekt.

Existují dva způsoby, jak to opravit. První metodou je použití svázat() svázat se osoba funkce k nově vytvořenému objektu:

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

S výše uvedenou úpravou, tento ve zpětném volání bude ukazovat na totéž tento jako funkce konstruktoru ( mě objekt).

Druhý způsob, jak vyřešit problém tento ve funkcích zpětného volání je pomocí funkcí šipek.

"toto" funkce uvnitř šipky

Funkce šipek se liší od běžných funkcí. Funkci zpětného volání můžete změnit na funkci šipky. S funkcemi šipek již nepotřebujete svázat() protože se automaticky váže k nově vytvořenému objektu:

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

Zjistěte více o JavaScriptu

Dozvěděli jste se vše o klíčovém slově „toto“ a o tom, co znamená ve všech různých kontextech JavaScriptu. Pokud s JavaScriptem začínáte, budete mít velký užitek z toho, že se naučíte všechny základy JavaScriptu a jak funguje.