Pohled na toto klíčové slovo v JavaScriptu

Jak byste nejlépe popsal JavaScript? Pro běžného joea je JavaScript často označovaný jako JS, jak bychom to ve většině částí tohoto článku nazývali, skriptovací nebo programovací jazyk, který umožňuje interakci s klientem, jako jsou animace a obecná webová interaktivita. Ačkoli JS lze použít jako technologii na straně serveru, v případě NodeJS taková konverzace přesahuje rozsah tohoto článku. Otázka, kterou byste měli mít na mysli, by měla znít, jaké téma spadá do rozsahu tohoto článku? Pokud jste odpověděli this , budete mít 100% správnou this klíčové slovo V JavaScriptu se bude diskutovat za účelem zjednodušení jeho použití nebo aplikace.

Zatímco JS je ve vztahu lásky a nenávisti k obecné programátorské komunitě (zejména se začátečníky), vrhneme více světla na to, proč this klíčové slovo je nevyhnutelné a je důležité ho znát.

Co je to?
V programovacím jazyce JavaScript this odkazuje na objekt. Konflikt obvykle vychází z toho, ke kterému objektu se vztahuje, ale to zcela závisí na tom, jak je vyvolán nebo vyvolán. Než budeme pokračovat, obešli jsme slovo objekt a porozumění objektům v JS je zásadní pro správné pochopení this .
Objekty v JS jsou nezávislé entity (forma) s vlastnostmi a typem. Pes může být například objekt se štěkotem, chůzí a běháním, přičemž jednou z jeho vlastností je také barva jeho srsti. Jednoduše řečeno, vlastnosti definují vlastnosti objektů.
Příklad:
Klikněte pravým tlačítkem myši na svůj prohlížeč, vyberte možnost Prozkoumat, poté kartu konzoly a zadejte následující kódy níže.

const myCar = {
   make: ‘Honda’,
   model: ‘Accord’,
   year: 2006,
   color: ‘Black’
};

Nemovitost můžete zavolat nebo se na ni odkázat zadáním níže uvedeného kódu:

myCar.color

vrací se

‘Black’

Poznámka: Toto je jen jeden způsob, jak deklarovat objekty v JavaScriptu, a pokud se nazývá vlastnost, která neexistuje, vrátí nedefinovaný.

Strávili jsme nějaký čas diskusí o non this nápad, ale stálo to za to, takže se vraťme k this a obecný koncept za tím.
Obecně this odkazuje na objekt volající funkci, což znamená this je definován objektem, který provádí dotaz nebo volání, a nikoli funkcí.
Podle výše uvedených kroků zadejte this ve vaší konzoli a získáte následující výstup odkazující na globální objekt systému Windows.

Window {window: Window, self: Window, document: document, name: '', location:
Location, …}

Toto lze rozšířit, abyste viděli další vlastnosti spojené s globálním objektem okna vašeho prohlížeče vlastnost window objektu Window ukazuje na samotný objekt Window. To znamená, že následující kódy po zadání v prostředí konzoly vrátí objekt okna.

window
window.window
window.window.window

Window {window: Window, self: Window, document: document, name: '', location:
Location, …}

Pokud bychom napsali this.location , vrátí aktuální adresu URL a další vlastnosti s ní spojené, stejně jako window.location Jak je ukázáno níže.

Location {ancestorOrigins: DOMStringList, href: 'https://esodora.com/', origin:
'https://esodora.com', protocol: 'https:', host: 'esodora.com', …}

Chcete-li si udělat jasnější obrázek, je třeba porozumět následujícím bodům a smířit se s nimi.

1. toto je vyhrazené klíčové slovo a nelze jej použít jako proměnnou: stejně jako ostatní programovací jazyky jsou pro jazyk a jeho vnitřní běh zachována vyhrazená klíčová slova, uživatelé je nemohou odkazovat pro ukládání jako proměnné a totéž lze říci o tomto klíčovém slově. Níže uvedený kód vyvolá chybu syntaxe.

let this = 'you cannot use as variable'
Uncaught SyntaxError: Unexpected token 'this'

2. Když je toto použito v objektové metodě, odkazuje na objekt: níže uvedený kód jasně ilustruje název.

const myCar = {
   brand: "Honda",
   model: "accord",
   year: 2006,
   details : function() {
      return this.brand + " " + this.model + " " + this.year;
   }
};
myCar.details()

se vrací

'Honda accord 2006'

3. Když je toto použito samostatně, odkazuje na globální objekt, jak je znázorněno ve výše uvedeném příkladu: tato část nevyžaduje žádné další vysvětlení, protože již bylo uvedeno výše pro vrácení objektu globálního okna.

4. Při použití ve funkcii , to odkazuje na objekt globálního okna, stejně jako při použití jako samostatný objekt.

function validate(){
   return this == window;
}
validate();
true

5. V přísném režimu , vrátí toto klíčové slovo nedefinováno, a to proto, že v přísném režimu globální objekt odkazuje spíše na nedefinovaný než na objekt okna.

"use strict"
function callThis(){
   console.log(this);
}
undefined
callThis()
undefined

6. V akcích , to se týká prvku, který přijal událost, to může být trochu složitější, budeme muset jít trochu dále a vytvořit jednoduchou HTML stránku.

<!DOCTYPE html>
<html>
   <body>
      <button onclick="this.style.backgroundColor='red'"> CHANGE COLOR </button>
   </body>
</html>

Toto označení můžete otestovat jednoduchým vytvořením .html stránku a poklepejte na ni.

7. Metody jako call(), apply() a bind() může na to odkazovat v jakémkoli objektu.
• call() and apply(): call() a apply() metoda s blízkými podobnostmi, což znamená, že mohou volat objekt a přitom předat jiný objekt jako argument původně volaného objektu. Zřejmý rozdíl mezi call() a apply() metoda spočívá v tom, jak berou argumenty. call() metoda přijímá argumenty jako samostatné hodnoty, zatímco apply() metoda využívá pole pro argumenty. Jak je znázorněno v příkladech níže:

Call() Příklad:

const buyer = {
printForm: function() {
   return this.fullName + " bought a " + this.model + " for " +this.price ;
}
}
const details = {
   fullName:"Chidi E. Egwu",
   model: "Tesla",
   price: 50000,
}
buyer.printForm.call(details);

vrátí výše uvedený kód

'Chidi E. Egwu bought a Tesla for 50000'

Můžete vidět, že metody call() berou jako argument jeden objekt.

použít() Příklad:

const buyer = {
printForm: function(model, price) {
   return this.fullName + " bought a " + model + " for " + price;
   }
}
const details = {
   fullName:"Chidi E. Egwu",
}
buyer.printForm.apply(details, ['Tesla', 50000]);

výše uvedený kód vrací stejný výsledek jako metoda call(), ale dělá to pomocí více argumentů, jak bylo vysvětleno dříve.

'Chidi E. Egwu bought a Tesla for 50000'

• bind(): metoda bind umožňuje půjčování napříč funkcemi, příklad níže toto tvrzení lépe vysvětlí.
Příklad:

const buyerForm = {
   fullName:"Chidi E. Egwu",
   model: "Tesla",
   printForm: function() {
   return this.fullName;
}
}
const salesAgent = {
   fullName:"Dorathy James",
}
let printAgent = buyerForm.printForm.bind(salesAgent);
printAgent();

Objekt salesAgent si vypůjčí metodu printForm od objektu BuyerForm a využije ji k vrácení celého jména agenta.

Shrnutí
Tento článek upozorňuje na různé aplikace a použití klíčového slova this v JavaScriptu; i když to není vyčerpávající, může být použit jako reference nebo odrazový můstek pro začátečníky, kteří se setkávají s tajemným JavaScriptem this klíčové slovo poprvé. Ať už jste si přečetli tento článek z jakéhokoli důvodu, doufám, že se mi podařilo zodpovědět, ne-li všechny, alespoň většinu vašich otázek o tom, jak začít s tímto klíčovým slovem a porozumět jeho základům v JavaScriptu.