Jedním z nejnáročnějších a často používaných konceptů v JavaScriptu je „ tento “. JavaScript používá „ tento “, jinak než v jiných jazycích. Je však nezbytný pro vytváření pokročilejšího kódu JavaScript. Jako začátečníkovi může být pro vás poněkud obtížné porozumět použití zmíněného klíčového slova, ale žádný strach!
Tento příspěvek vysvětlí „ tento ” klíčové slovo a jeho použití v JavaScriptu.
Co je „toto“ v JavaScriptu?
“ tento ” je klíčové slovo v JavaScriptu, které odkazuje na objekt, který provádí existující blok kódu. Představuje objekt, který vyvolává aktuální funkci. Používá se v několika scénářích různými způsoby, například:
-
- V metodě
- Při vyřizování událostí
- Ve funkcích
Pojďme se podívat na každé ze zmíněných použití jedno po druhém!
Jak používat „toto“ v metodách JavaScriptu?
“ tento ” se používá v metodách JavaScriptu jako implicitní vazba. Když je funkce volána pomocí objektu a tečky, je považována za implicitní vazbu a „ tento “ ukazuje na objekt během volání funkce.
Příklad
Nejprve vytvoříme objekt s některými vlastnostmi a metodou a poté použijeme „ tento ” klíčové slovo pro získání hodnot vlastností objektu:
var personInfo = {
název: 'John' ,
věk: dvacet ,
info: funkce ( ) {
konzole.log ( 'Hej! Já jsem' + toto.jméno + ' a já jsem ' + tento.věk + 'let' ) ;
}
}
Dále zavolejte na „ info() ” metoda spolu s názvem objektu:
Je vidět, že zadané hodnoty vlastností aktuálního objektu jsou úspěšně zobrazeny:
Pokud chcete použít „ tento ” při zpracování událostí postupujte podle níže uvedené části.
Jak používat „toto“ při zpracování událostí JavaScriptu?
V tomto příkladu se podívejte na použití „ tento ” klíčové slovo ve zpracování událostí. Za tímto účelem zvažte příklad, ve kterém skryjeme naše tlačítko jediným kliknutím. Chcete-li to provést, vytvořte tlačítko a připojte „ při kliknutí() ” událost s ním pro přístup k vlastnosti style.display s “ tento ” klíčové slovo, které po kliknutí skryje tlačítko:
< h3 > Klepnutím skryjte tlačítko h3 >< knoflík při kliknutí = 'this.style.display='none'' > Klikněte zde ! knoflík >
Výstup
Pokud jste zmateni ohledně použití „ tento ” klíčové slovo v uživatelsky definovaných funkcích v JavaScriptu, postupujte podle dané sekce.
Jak používat „toto“ ve funkcích JavaScriptu?
Při použití „ tento ” ve funkcích existují v JavaScriptu tři typy vazeb, včetně:
-
- Výchozí vazba
- Implicitní vazba
- Explicitní vazba
Pojďme jim rozumět jednotlivě!
Příklad 1: Použití tohoto klíčového slova ve výchozí vazbě
Ve výchozí vazbě je „ tento Klíčové slovo ” funguje jako globální objekt. Většinou se používá v samostatných funkcích.
Pojďme pochopit uvedený koncept na příkladu.
Nejprve vytvoříme proměnnou „ X “ a přiřaďte mu hodnotu “ patnáct “:
var x = patnáct ;
Poté definujte funkci s názvem „ functionDB() “ a jeho definice funkce, vytvořte proměnnou se stejným názvem “ X “ a přiřadit mu hodnotu “ 5 “, poté vytiskněte jeho hodnotu pomocí „ console.log() “ metoda s “ tento klíčové slovo:
var x = 5 ;
konzole.log ( toto.x ) ;
}
Nakonec zavolejte „ functionDB() Funkce ”:
Vzhledem k použití „ tento “, výstup zobrazí hodnotu “ X ' tak jako ' patnáct “, protože funguje jako globální objekt a proces se nazývá „ Dynamická vazba “:
Příklad 2: Použití tohoto klíčového slova v implicitní vazbě
Když je funkce volána objektem nebo symbolem tečky, “ tento Klíčové slovo ” funguje jako implicitní vazba. Ukazuje na objekt během volání funkce.
V tomto příkladu definujeme funkci „ info() “ a použijte „ tento ” klíčové slovo v definici funkce:
funkce info ( ) {konzole.log ( 'Hej! Já jsem' + toto.jméno + ' a já jsem ' + tento.věk + 'let' )
}
Poté vytvořte objekt s názvem „ info o osobě “ s definovanými vlastnostmi:
název: 'John' ,
věk: dvacet ,
info: info
}
Nyní zavolejte funkci podél objektu:
Výstup
Příklad 3: Použití tohoto klíčového slova v Explicit Binding
Explicitní vazba se také nazývá „ tvrdá vazba “ protože funkce je vynuceně volána, aby využila konkrétní objekt pro „ tento ” vazba, aniž by se na objekt vkládal odkaz na funkci vlastnosti. K tomuto účelu lze použít metody call(), apply() a bind().
Nyní použijeme stejnou funkci s názvem „ info() “ definované v předchozím příkladu. Poté vytvořte objekt s názvem „ info o osobě “ s následujícími hodnotami:
var personInfo = {název: 'John' ,
věk: dvacet
}
Pro vyvolání funkce s názvem „ info() “, použijeme „ volání() ” a předejte jej vytvořený objekt jako argument:
Protože info() není součástí objektu, stále k němu máme explicitně přístup:
Pro explicitní volání funkce můžete také použít metody apply() a bind(). Metoda apply() je totožná s metodou call(), zatímco metoda bind() vytváří novou funkci se stejným tělem a rozsahem, která se chová stejně jako původní funkce. Metodu bind() lze použít k vrácení funkce, kterou můžete použít později.
Pro volání info() pomocí metody apply() použijte následující příkaz:
info.použít ( info o osobě ) ;
Poskytuje stejný výstup jako metoda call():
Za volání' info() “ s „ svázat() “, použijte daný příkaz:
Výstup
Shromáždili jsme všechny podstatné informace týkající se „ tento “.
Závěr
“ tento ” je klíčové slovo v JavaScriptu, které odkazuje na objekt, který provádí existující blok kódu. Představuje objekt, který vyvolává aktuální funkci. Používá se ve více scénářích různými způsoby, včetně metod, zpracování událostí a funkcí. V tomto příspěvku jsme vysvětlili „ tento ” klíčové slovo v JavaScriptu.