Krok za krokem jsme na cestě k lepšímu pochopení JavaScript Engine. Viděli jsme, jak JavaScript vytváří, spouští a prochází světem skriptů. V posledních dvou příspěvcích jsme cvičili naši představivost. Tentokrát se musíme více snažit 💪
Pokud si potřebujete osvěžit kontext provádění a zásobník hovorů, zvažte přečtení posledních dvou příspěvků 😉
Představte si kontext provádění a zvedání
Představte si zásobník hovorů
Tuto funkci JavaScriptu již známe je svět. Malý svět uvnitř velkého globálního světa. Dnes vytvoříme první město. "Město funkcí".
Vítejte ve Function City! 🌃
Představivost zapnuta 🌈
Každé město musí mít budovy a domy (to je to samé, aha). Každé město má předměty a zboží i pro občany, aby je mohli použít it - nakupovat, prodávat, vařit, nosit atd. Budovy mohou být také zbožím, jako soukromý majetek. Občané používají budovy také.
Město potřebuje starostu. A starosta Function City je všemi milován! Je to velmi laskavá a velkorysá osoba. Město má vlastní majetek a statky. Tyto statky jsou veřejné a zdarma pro každého. Každý dům hold mít přístup jim.
Jako v každé moderní společnosti má každý své soukromé statky, které si občané uchovávají ve svých domech . Někteří na druhou stranu mají určitá privilegia a mohou měnit zboží dostupné pro občany.
Město se samozřejmě neobejde bez pomocníka budovy , aby s nimi občané mohli komunikovat. Restaurace, kina, obchody atd. Všechny tyto budovy nabízejí vám své služby a jsou funkční ve městě.
Mimochodem, vaše sestra Julia pracuje v jednom z nich. Pracuje ve společnosti Translation Services Agency. Zajímá vás, jak tato agentura funguje? Takže projdete jim vaše doklady (zboží), oni jej zpracují a vrátí výsledek zpět k vám.
Ve městě je tolik zboží, které je veřejné a agentura má přístup jim. Agentura může tyto dokumenty v případě potřeby skutečně změnit a zpracovat.
Takže to vypadá na pěkné město, že? To je. Ale taky trochu zvláštní. Starosta může změnit význam zboží. Co? Co to znamená? Řekněme, že dnes jste měli auto, pak starosta přeměnil další položka do auta a puf...teď máte mrkev.
Existuje soubor slov, která dal stvořitel celého tohoto světa. Ta slova se nedají změnit. Nikdo nemůže změnit přiřazení jim. Občané mají také zdravý rozum. Když stavěli město, udělali si seznam konstant slova, která také nelze přeřadit. Na těchto slovech závisí celé město.
Představivost VYPNUTA
Fuj...tohle byla těžká abstrakce. Snažil jsem se to udělat jednoduše, ale smysluplně.
Jakékoli stavby jako budova představují funkce. Pamatujete si na malý svět ve velkém? Stejně jako váš vlastní dům je malý svět ve velkém světě. zboží jsou hodnoty. Názvy jsou názvy proměnných. Libovolné položce lze znovu přiřadit jakýkoli název, kromě těchto pravidel.
Rozsah
Před EcmaSript 2015 (ES6) pouze var byl k dispozici a rozsahy byly skutečným problémem. Proměnná deklarovaná pomocí var by byly dostupné všude ve skriptu a mohly by být znovu deklarovány. ES6 představil let a const deklarace proměnných. Mají blokový (místní) rozsah a var byl téměř úplně vyměněn.
Co je tedy rozsah? 🤔
Naše skripty jsou plné funkcí. Funkce, jak víme, mohou přebírat argumenty, mají svůj vlastní lokální kontext provádění, mohou mít vlastní lokální proměnné. Toto je rozsah. Rozsah funkce. Je to jako uvnitř budov, které jsme si představovali. Soukromé. Zajistit. S vnějším světem můžete interagovat zevnitř. Ale vnější svět s vámi nemůže komunikovat.
Funkce mohou mít uvnitř funkce a ty se budou řídit stejnými pravidly. Podívejme se na příklad:
function example (a, b) {
console.log(a);
function inside () {
let c = 'Hello';
console.log(c + ' world!');
console.log(b);
}
inside();
}
Vypadá to zmateně, že? Zkuste si zapamatovat vše, co jsme se doposud naučili. Co se stane jako první? Globální kontext provádění. Ve fázi vytváření bude veškerý kód načten pomocí JavaScript Engine a uložen do paměti. function example() je kompletně uložen do paměti a připraven k vyvolání. Fáze tvorby je v tomto bodě u konce. Spustí se fáze provádění. Fáze provádění projde kódem a jakmile dosáhne example() vyvolá to. Co bude dál?
Jednou function example() je vyvolán kontext provádění funkce se spustí. Pokud si pamatujete, je to téměř stejné jako Global. Objekt arguments bude vytvořen a uloží naše a a b argumenty. console.log(a) je také funkce a bude uložena do paměti. function inside() bude také uložen. Pak je opět čas na fázi provedení. console.log(a) bude vyvolán a vytiskne příkaz v konzole. Poté jednou dosáhne inside() opět se stane to samé. Spustí se kontext provádění funkce.
Doufám, že když se na to podíváte krok za krokem, bylo to mnohem snazší pochopit. Každý kontext spuštění může mít přístup k nadřazeným proměnným kontextu spuštění. Ale rodič nemá přístup k těm svým dětem. Nadřazený kontext spuštění může data předávat pouze jako argumenty.
Příklad výstupu
example('Yo!', 'You are the best =)');
> 'Yo!'
> 'Hello world!'
> 'You are the best =)'
Můžete vysledovat, co se stalo? Co se v tomto případě stane potom?
function example (a, b) {
console.log(a);
b = 'See you around =)';
console.log(c);
function inside () {
let c = 'Hello';
console.log(c + ' world!');
console.log(b);
}
inside();
}
Zkuste zapojit svou fantazii. Zkuste si představit ty obory, ty zamčené domy se soukromými údaji. Má někdo přístup k vašemu zboží uvnitř vašeho domu?
Myslím, že jste to zvládli. Ale co když deklarujeme c předtím a pak to zkuste deklarovat znovu pomocí var ?
function example (a, b) {
console.log(a);
var c = 'Hehehe I am nasty var';
b = 'See you around =)';
function inside () {
var c = 'Hello';
console.log(c + ' world!');
console.log(b);
}
console.log(c);
inside();
}
Jsme ti privilegovaní občané, kteří mohou změnit c? na jejich vůli? Ano, jsme. var deklarace probíhá v Global Scope (k dispozici všude v programu) nebo v Function Scope (dostupná pouze uvnitř funkce a dalších vnitřních funkcí). var lze přeřadit a dokonce znovu deklarovat.
let a = 'hey I am an a!';
let a = 'now I am z!';
> Uncaught SyntaxError: Identifier 'a' has already been declared
var b = 'hey I am b!';
var b = 'now I am z!';
console.log(b);
> 'now I am z!'
Nyní po tomto úryvku kódu, pokud jste nemohli spravovat předchozí, podívejte se znovu.
Souhrn
Rozsahy JavaScriptu mohou být matoucí. Může to být skličující a těžké. Ale hej, všichni jsme si tím prošli. Zkuste cvičit s osciloskopy. Hrajte si s proměnnými v různých částech vašeho skriptu a funkcí. Zkuste vnořit 10 funkcí a než to spustíte, dejte vše na papír. Jak očekáváte console.log výpisy vytisknout. Jaké bude pořadí? Udělejte to těžší. Přidejte let , const a var uvnitř vašich funkcí a pokuste se znovu přiřadit a znovu deklarovat proměnné. Dejte na papír. Dokážete je ještě vystopovat?
Vsadím se, že jakmile toto cvičení uděláte několikrát, uvidíte obrázek. Budete moci sledovat tok dat od argumentů předávaných první funkci až po nejvnitřnější funkci. Představivost je to, co chci, abyste se zapojili.
Doufám, že to nebylo matoucí a pomohlo vám to. Dokonce i trochu. I pro mě to byla velká pomoc. Napsat tento příspěvek bylo těžké a imaginární svět není dokonalý.
Uvidíme se!