logo

Co je to klíčové slovo „toto“ v JavaScriptu (objektově orientované programování)

„toto Klíčové slovo ‘ v JavaScriptu je pro některé matoucí pojem – význam slova ‘toto “ se mění na základě kontextu. Tento článek vysvětluje, co „toto ‘ je.

Co je to objektově orientované programování

Objektově orientované programování je způsob strukturování kódu tak, aby byla data uspořádána do objektů . JavaScript podporuje objektově orientované programování a poskytuje různé nástroje, které jej pomohou implementovat.

Jednoduše řečeno, místo abyste měli spoustu samostatných abstraktních proměnných popisujících položku, zkombinujete je do jediného objektu, který tuto položku reprezentuje. K objektu můžete také přidat funkce, které mu umožní dělat věci, jako je aktualizace hodnot uložených v objektu nebo interakce s jinými objekty.

Například , pokud vytváříte aplikaci, která zaznamenává všechna auta, která jste kdy vlastnili, místo abyste měli samostatné proměnné obsahující všechny značky, modely, barvy atd., pro každé auto máte objekt auta em> která obsahuje data pro jeden vůz. To usnadňuje manipulaci s velkým množstvím dat a usnadňuje strukturování vaší aplikace. Pokud chcete získat všechny informace o určitém voze, můžete daný předmět uchopit a vědět, že obsahuje vše, co potřebujete vědět o této konkrétní položce.

Rozsah a kontext

I když se často používá zaměnitelně, rozsahy a kontexty jsou mírně odlišné.

A rozsah definuje variabilní přístup – zda ​​je proměnná přístupná kódu v aktuální části aplikace. Například proměnná deklarovaná uvnitř funkce není přístupná mimo ni, protože mají různé rozsahy .

A kontext je však nadřazeným objektem spouštěného kódu. Protože objekt může obsahovat více metod (což jsou funkce), každá metoda bude mít jiný rozsah (samotné funkce) se stejným kontextem (rodičovský objekt).

Více o proměnných a rozsahech naleznete zde.

Co je to toto ?

toto je klíčové slovo v JavaScriptu. Používá se stejně, jako byste použili jakoukoli proměnnou.

toto odkazuje na tento objekt, na kterém právě pracujete, kde toto je napsáno v kódu . To znamená, že odkazuje na aktuální kontext .

Pokud pracujete v funkci , toto odkazuje na nadřazený objekt funkce. Pokud pracujete v objektu , toto odkazuje na objekt.

JavaScript zachází s mnoha věcmi jako s objekty , takže zde je přehled toho, co to odkazuje v každém scénáři.

toto Mimo metod, funkcí, objektů

Pokud toto se používá samostatně, mimo jakoukoli nadřazenou třídu, objekt, funkci, odkazuje na globální objekt.

var testVar = 9;
console.log(this.testVar); // Prints 9

Výše je globální proměnná testVar je definováno. Chcete-li to dokázat, toto odkazuje na globální objekt, můžete zkusit získat přístup k this.testVar – což vrátí 9.

toto v metodě (Object Method Binding)

Objekty v JavaScriptu jsou různých tříd. Kurzy mohou mít metody – funkce, které lze spustit na každém objektu dané třídy a dělat s ním věci.

Při psaní kódu pro metodu toto bude vždy odkazovat na objekt.

Například:

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

var fordCar = new Car('Ford', 'Model T');

Nahoře Auto třída je definována. Pomocí této třídy pak lze vytvářet objekty. Konstruktor metoda (funkce) se používá k nastavení hodnot Auto class, když je vytvořena, nastavte atributy pro proměnnou toto .

V tomto případě objekt s názvem fordCar je vytvořen. Když je konstruktor spuštěn, toto odkazuje na fordCar objekt a nastaví pro něj hodnoty make/model, které byly předány jako parametry.

Explicitní funkce vazby

Je možné změnit, co toto odkazuje uvnitř metody objektu pomocí call() a použít() metody tohoto objektu. volání() a použít() jsou vestavěné metody JavaScriptu, které jsou dostupné všem objekty jakékoli třídy. Obě metody fungují podobně a liší se v tom, jak se jim po poskytnutí kontextu předávají další argumenty.

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    // makeModel method will return the make of model of the current object
    makeModel(){
        return this.make + ' ' + this.model;
    }
}

var fordCar = new Car('Ford', 'Model T');
var toyotaCar = new Car('Toyota', 'Hilux');

fordCar.makeModel.call(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the call method changed the context
fordCar.makeModel.apply(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the apply method changed the context

toto ve funkci

Jak je vysvětleno výše, funkce mít rozsahy ale neuvádějte kontext . Takže v rámci samostatné funkce bez nadřazeného objektu nebo třídy toto bude odkazovat na globální kontext.

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // Prints 9
}

testFunction(); // Run the function defined above

Funkce a přísný režim

Přísný režim je volitelné nastavení, které lze povolit v JavaScriptu a které vám brání v provádění některých věcí, které obvykle můžete dělat. Tyto věci mají tendenci být buď věci, které budou odstraněny z budoucích revizí JavaScriptu, nebo věci, které jsou považovány za „nedbalé“ – kód, který je platný, ale napsaný způsobem, který pravděpodobně způsobí chyby nebo bude obtížně interpretovatelný.

V přísném režimu tedy toto NE odkazují na globální objekt při použití v samostatné funkci. Na nic neodkazuje a vrátí se nedefinováno .

'use strict';

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // undefined
}

testFunction(); // Run the function defined above

toto v obslužných rutinách událostí HTML

Když toto je volána z obslužné rutiny události v prvku HTML, odkazuje na samotný prvek HTML.

<button onclick="console.log(this);">
    Print information on this HTML element
</button>

Výše uvedený kód HTML vytiskne informace na