Poslední díl článku Petra Staníčka o oblasti působnosti proměnných se věnuje uzávěrům (closures) v JavaScriptu a použití klíčového slova this.
Jestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.
Reportáž z virtuální konference FOSDEM. Minule jsem popsali Go room, dnes se věnujeme monitoringu a observability.
Mikrofrontendy jsou zajímavá adaptace konceptu microservices pro potřeby frontendového vývoje. Podívejte se, co to v praxi obnáší a proč jsme se v Seznam.cz rozhodli vyvinout náš vlastní microfrontend framework, Merkur.
Re: Javascript a oblast působnosti proměnných - díl třetí
Pokud píšu o uzávěrech (já vím, psal jste, že tomu nerozumíte, proto o tom píšete), tak je velice jednoduché skončit u that = this. Pak se ale nedivme, že lidi co k tomu příjdou se ptaj, proč je někde this a někde that.
Mnohem lepší by bylo zmínit možnost zakonzervovat si this pomocí konstrukce apply.
Re: Javascript a oblast působnosti proměnných - díl třetí
Byl jste rychlejsi, zrovna jsem chtel napsat :
var XYZ = {}; XYZ.test = function(param) { this.X = param; var init = function() { if (this.X==undefined) alert('chyba'); else alert('je to ok '); } init.call(this); // init.apply(this); }; XYZ.test(1);Re: Javascript a oblast působnosti proměnných - díl třetí
Mnohem lepší by bylo zmínit možnost zakonzervovat si this pomocí konstrukce apply.
Čo myslíte pod tým zakonzervovaním?
Bez toho, aby bolo to pôvodné this do niečoho uložené to nepôjde.
Jestli tomu dobře rozumím
tak bez anonymní funkce to bude také fungovat
var XYZ = {}; XYZ.test = function(param) { this.X = param; function init() { if (this.X==undefined) alert('chyba'); else alert('je to ok '); } init(); }; XYZ.test(1);Re: Jestli tomu dobře rozumím
A spustil jste si to?
Re: Jestli tomu dobře rozumím
Zkusil a zjistil, že je jedno jestli je funkce anonymní nebo ne.
Mám tam ale jedno mlhavé místo, kód níže vrací:
A tomu druhému řádku příliš nerozumím. (Možná v seriálu chybí lepší vysvětlení operátoru new.)
var XYZ = {}; XYZ.test = function(param) { this.X = param; var init = function() { if (this.X==undefined) alert('chyba'); else alert('je to ok '); } init(); }; var test = XYZ.test; XYZ.test(1); A = new XYZ.test(1); test(1); B = new test(1);Re: Jestli tomu dobře rozumím
Opravdu zkusil? a opravdu ten vas priklad dava stejnou hodnotu jako ten nahore? Ne nedava! takze to jedno neni. Jake mlhave misto make krom toho new? Jaky druhy radek?
Nicmene pro vasi informaci, ty vase 4 posledni radky: – Prvni je stejny jako vyse a dokazuje, ze nemate pravdu. – Druhym volate funkci test jako konstruktor a tedy v A je objekt s jedinou vlastnosti a to X, funkce init se k nemu nevztahuje a tudiz nezna this jako tento objekt – Treti je volani pouze funkce test, pak this = globalni objekt (window) a cirou nahodou je this v init take globalni objekt, pak to vypise OK – Ctvrty je to same jako Druhe, nicmene vam predchozi volani nadefinovalo window.X, tudiz to projde, kdyby byl zakomentovan treti radek, neprojde to taky
Co presne nechapete na operatoru new?
Re: Jestli tomu dobře rozumím
Opravdu jsem si to zkusil, anonymni nebo neanonymni funkce – vysledek stejny:
var XYZ = {}; XYZ.test = function(param) { this.X = param; var init = function() { if (this.X==undefined) alert('chyba'); else alert('je to ok '); } function initb() { if (this.X==undefined) alert('chyba'); else alert('je to ok '); } init(); initb(); };Jsem zmaten kvůli tomu, že autor psal, že lokálně definované funkce uvnitř konstruktoru slouží jako privátní metody a že jsou v nich přístupné všechny lokální i veřejné proměnné. Což tedy, jak se ukazuje, není pravda.
Re: Jestli tomu dobře rozumím
Problém vašeho zmatení je nejspíš v tom, te v tomto případu žádný konstruktor není.
Re: Jestli tomu dobře rozumím
this nemůžete brát jako „normální“ proměnnou. V lokálně definované funkci jsou přístupné lokální proměnné díky uzávěře (closure). this se ale uzávěra netýká, o tom je právě druhá část tohoto článku (část Tohle & Tamto).
apply / call
A zrovna o tedle moznosti (apply / call) se pise v clanku na ktery pixi odkazuje pod svym clankem .. :) … docela sranda :)
Velikost písmen
Zmatek s velikostí písmen bohužel pokračuje. Jeho důsledkem je teď to, že se článek odkazuje na neexistující objekt
Window(ve skutečnosti je to objektwindow).Re: Velikost písmen
Budu chytat za slovo. Zkusil jsem do asresního řádku prohlížeče (FF řady 3.5) napsat obojí: javascript:alert(Window) javascript:alert(window)
Hele, oboje háže „[object Window]“.
No dobře, oboje je něco jinýho. javascript:alert(Window.document) vs. javascript:alert(window.document) to koneckonců dokazuje. Window je AFAIK „třída“ (prototyp) pro window.
Toto ukazuje, jak je důležité na takovou konvenci dbát!
Co je to Window
Upřesním. Když se v kódu objeví ‚Window‘, je jasné, že autor neví která bije. Internet Explorer (6/7) totiž na rozdíl od ostatních prohlížečů neodkazuje na konstrukční funkci (constructor), ale na historické dědictví, známé jako [Interface prototype object]. Internet Explorer podporuje plnohodnotný prototype/constructor pouze pro objekty: Array, Boolean, Date, Error, Function, Number, Object, RegExp a String. [Interface prototype object] je něco jako polo-prototype, instancím lze přidat vlastnosti, avšak instance samotné constructor nemají. Navíc je tento interface podporován pouze pro několik BOM typů: window, option, image (myslím, že to jsou všechny) Žádný smysluplný kód nikdy nikde ‚Window‘ nepoužívá, snad krom nějakých prehistorických copy&past mousehover příkladů.
Re: Velikost písmen
Ano, důležitost konvence se ukáže třeba v případě, kdy alert(Window) zkusíš v IE nebo když v kterémkoliv prohlížeči napíšeš třeba alert(new regexp). Firefox v alertu píše název konstrukční funkce, ze které je objekt odvozen, např. u document to je HTMLDocument.
Re: Velikost písmen
Objekt
Windownamístowindowbyl překlep. Tu větu jsem do článku dopisoval dodatečně a narychlo až při finální korektuře (redakce může potvrdit) a prostě mi to uteklo. Samozřejmě, moje chyba a omlouvám se. Nicméně rozdíl mezi nimi je mi znám a nikoho úmyslně nematu. Děkuji za pochopení.Poprosím redakci o opravu, ať to nemate aspoň pozdější čtenáře.
Tisk
Nevim jak ostatnim, ale ja kdyz si chtel vytisknout clanek z Firefoxu, tak zmizely vsechny zdrojaky, zustaly z nich jen cisla radek ;)
Re: Tisk
Tak dela to nejen v FF, ale i v IE, O a Ch.
Re: Tisk
Máte pravdu. To není příjemné, předám to vývojovému oddělení k prozkoumání. Do té doby si zkuste před tiskem vypnout JS. Za potíže se omlouváme.
Deklarace proměnné po definici uzávěru
Uzávěr sice skutečně vidí proměnné deklarované ve funkci až po jeho definici, ale je lepší se tomu vyhnout. Uzávěr se o proměnné totiž dozví až když k její deklaraci interpret skutečně dojde. Do té doby ale může uzávěr někdo zavolat (ať už sama funkce nedopatřením nebo třeba asynchronně při obsluze nějaké události). V tom případě by vznikla při zápisu do proměnné uzávěrem globální proměnná. Lepší je proto deklarovat všechny proměnné vždy na začátku funkce.
Chování lze ověřit na tomto kódu:
function f() { var g = function () { x = 2; } g(); var x = 1; } f(); console.log(x);Další užitečné konvence uvádí Dougles Crockford.
Re: Deklarace proměnné po definici uzávěru
V vašom kóde vidí interpret x vo funkcii g hneď, no má hodnotu undefined.
Takže ku vytvoreniu globálnej premennej x v žiadnom prípade nepríde.
Re: Deklarace proměnné po definici uzávěru
To je kvalitní nesmysl! Jak ho má vidět?
Re: V. Šesták
Neviem na koho reagujete, použil som terminológiu J. Vrány o „videní“ premennej.
Treba vyskúšať tento kód:
function f() { var g = function () { alert(x); // undefined x = 2; } alert(x); // undefined g(); alert(x); // 2 var x = 1; alert(x); // 1 } f(); alert(x); // vyvolá chybu, globálna premenná x neexistujeRe: V. Šesták
Omlouvám se, máte pravdu. Koukám, že v tomto se JS chová zvláštně a že mě stále může i zde překvapit. To, co mě dostalo, je možné demonstrovat snadno:
function f() { e = 5; var e; }; f(); alert(window.e); // Pokud ve funkci f vznikla vlastnost globálního objektu e místo lokální proměnné e, // vypíše pětku. // Pokud funkce f touto chybou netrpí, vypíše undefined.Když zakomentuju řádek „var e;“, tak se změní chování. A <b>vůbec nevadí, že proměnnou vařím až po jejím používání!</b>
Viděli jste už někdo někde jinde takovouto zvláštní směs statického a dynamického chování?
Re: V. Šesták
To vysvetlenie nie je až tak zložité, nasledujúce dve definície funkcie sú ekvivalentné – ak sú miesto toho komentára tie isté príkazy:
function f(){ var x; /* príkazy */ x = 1; }function f(){ /* príkazy */ var x = 1; }Podobne sa chovajú aj funkcie, je ich možné volať už pred ich definovaním, teda pokiaľ sú definované tak, ako vyššie, nie literálom. Kód je spracovávaný na dvakrát a takéto veci sú spracované pri tej prvej analýze.
Re: V. Šesták
Já jsem to pochopil, ale zdá se mi to divné…
Re: Deklarace proměnné po definici uzávěru
Shrnul bych to takto: * při obsluze události to nastat jen tak nemůže, události jsou řazeny do fronty ke zpracování v jednom vlákně. Výjimku by ale mohlo tvořit třeba yield a volání zevnitř funkce není nemožné. * Globální proměnná takto vzniknout nemůže. * Rozhodně je přehlednější „varovat“ proměnné před použitím než až po použití. Už kvůli zvyku programátorů z jiných jazyků. * Pozdější „varování“ proměnných může také vést k jejich inicializaci po určité úpravě.
Ve výsledku bych považoval konvenci „nejdřív ‚varuj‘“ za něco, co skoro nic nestojí, ale může se hodit a je to slušné. Podobně jako odsazování kódu.
vznik closure
Možná by ještě stálo za zmínku, že closure v JavaScriptu vzniká vždy na úrovni funkce. To proto, že v jiných jazycích s funkcionálními rysy (např. C#) může closure vzniknout na úrovni bloku.
Zmiznutie lokálnej premennej x vo funkcii zpracuj?
Tým svojim osvieteným pohľadom len mätiete ostatných.
Tá premenná x po skončení funkcie zpracuj vôbec nezmizne,
ale práve zostane uchovaná v tej funkcii zadanej do toho onclicku.
Toto vysvetlenie je oveľa jednoduchšie, než tie „zálohy kontextu“ so špeciálnym správaním.
Treba vyskúšať tento kód a bude to oveľa jasnejšie, že žiadne zálohy kontextu sa nerobia a pracuje sa vo všetkých funkciách s tou istou premennou x:
var ukazx1, ukazx2, nastavx1, nastavx2; function f(){ var x; function u1(){alert(x);} function u2(){alert(x);} function n1(t){x = t;} function n2(t){x = t;} ukazx1 = u1; ukazx2 = u2; nastavx1 = n1; nastavx2 = n2; } f(); nastavx1(1); ukazx1(); // 1 ukazx2(); // 1 nastavx2(2); ukazx1(); // 2 ukazx2(); // 2Re: Zmiznutie lokálnej premennej x vo funkcii zpracuj?
Pred tým komentárom som to neprečítal celé, takže tá kritika nie je úplne oprávnená,
no to o tých „zálohách kontextu“ platí.
Re: Zmiznutie lokálnej premennej x vo funkcii zpracuj?
IMHO to o „zálohách kontextu“ platí. Ve Vašem příkladě se také jedná o „zálohu kontextu“ – je zde ale pouze jedna, protože funkce f je volána jen jednou – to Vás asi zmátlo.
Prostě proměnná x existuje vždy v nějakém kontextu a pokud někdo ten kontext nějak referencuje, tak ho GC nepožere, takže pořád existuje. V uvedených případech je kontext referencován přes proměnnou x, která je referencovaná vnořenou funkcí (resp. funkcemi), jejíž reference je přiřazena do globální proměnné.
Re: Zmiznutie lokálnej premennej x vo funkcii zpracuj?
Kód mi jasný, nič ma nezmiatlo. Ono trochu záleží, čo je pod tým zmiznutím premennej a kontexte myslené. Ako definujete ten kontext? Lepšie by bolo povedať, že na tú premennú existujú viaceré odkazy a netreba potom rozmýšľať o „kontexte“, platnom, keď funkcia skončí, ako v článku. Ten „uzáver“ by nejakým spôsobom mohol fungovať, aj keby funkcia neskončila. Teda uvažovať tak, že je referencia na tú premennú x a nie na nejaký ťažko definovateľný kontext.
terminologie
mozna spis nez „zaloha kontextu“ by slo pouzit „reference na kontext“, alespon takto se closures popisuji v anglicky psane literature a tak mi to prijde presnejsi, protoze „zaloha“ IMHO implikuje spis klon, ktery nema vztah ke svemu originalu, pritom ale o ten vztah jde predevsim (bez nej by nebylo treba delal triky s prirazovanim iteracni promenne do lokalni promenne nebo s prirazovanim this do that, prave proto, aby vznikla closure)
ale jinak velmi kvalitni clanek
Re: terminologie
„reference na kontext“ To je celkem vystihující. Běh funkce má referenci na svůj kontext, kam se ukládají lokální proměnné. Je-li vytvořena lokální funkce, pak samotná lokální funkce dostává referenci na kontext běhu vnější funkce. V případě zavolání této funkce vznikne kontext, který se smíchaný s kontextem přiřazeným k funkci, takže vidím i proměnné z vnějších funkcí. V souvislosti s referencemi bývá zmiňován garbage collector. Zde by fungovalo i počítání referencí, bylo-li by správně napsáno. Ten vysvětluje ty „zálohy“ elegantněji: pokud funkce doběhne, pak běhu této funkce zanikne reference. Pokud tu ale je reference na její kontext, pak prostě nebude uklizen. To mi zní čistěji než „záloha kontextu“. Ve výsledku to ale zvenku vyjde nastejno. Implementačními detaily se zde nezabýváme.
Re: terminologie
Celý ten pojem „kontextu“ mi príde nadbytočný.
Čo je chybné na úvahe, že premenná x v prvom kóde článku existuje ďalej aj po skončení funkcie zpracuj?
V tej funkcii predanej do onclick nie je vytváraná žiadna ďalšia premenná, tak sa mi zdá logické a najjednoduchšie uvažovať o tom, že premenná x existuje aj po skončení funkcie zpracuj.
Existencia premennej counter v dobe definovania ovládačov
V článku je že: … proměnná counter v době definování ovladačů ještě neexistovala … (4. kód)
No v skutočnosti tá premenná vtedy už existovala, len jej hodnota bola vtedy undefined.
A co let?
Pokud se máme bavit o JavaScriptu obecně, pak by v souvislosti s closures stálo za zmínku klíčové slovíčko let, které umožní vytvořit closure uvnitř funkce. Dostupné je od verze 1.7.
Re: A co let?
To je vec, ktorá by nefungovala vo veľkej časti súčasných prehliadačov so zapnutým funkčným JavaScriptom.
Vytvorenie „uzáverov“ je možné aj iným spôsobom, no je to zlé riešenie, pretože je taký kód ťažko optimalizovateľný, napríklad:
with({n:1}) var f = function(){return n++;};Re: A co let?
Proto jsem psal „Pokud se máme bavit o JavaScriptu obecně“.
A ano, bez použití letu je IMHO jediným způsobem, jak vytvořit closure, vytvoření další funkce.
Re: A co let?
Nie je to jediný spôsob, dá sa použiť with, no je to zlé riešenie:
function f(){ var i=1; alert(i); // 1 with({i:2})alert(i); // 2 alert(i); // 1 } f();Re: Javascript a oblast působnosti proměnných - díl třetí
Děkuji moc za tuto sérii článků, hodně mi pomohly objasnit kontexty v JS. Jen tak dál!