Execution Context - Zaawansowany JavaScript #1/4
Вставка
- Опубліковано 7 вер 2024
- Execution context to abstrakcyjny koncept środowiska w którym interpretowany i wykonywany jest kod JavaScript. Za każdym razem gdy uruchamiamy kod JS, dzieje się to w Execution Context.
Pliki źródłowe: github.com/ice... Chcesz zawsze pozostać na bieżąco z programowaniem?
📩 Zapisz się na newsletter:
overment.com/n...
🔔 Subskrybuj mój kanał - www.youtube.co...
🎓 Więcej moich kursów znajdziesz na:
overment.com/e... (reflink)
Tworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne.
Znajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne.
Podobał Ci się ten film? Upewnij się, że zobaczysz kolejne:
🔔 Subskrybuj mój kanał - ua-cam.com/users/overment
📩 Zapisz się na newsletter: overment.com/newsletter
Świetny materiał jak zawsze. Czasem fajnie wiedzieć jak działa technologia w której się poruszamy :)
Dokładnie tak :) Szczególnie, że często pozwala to inaczej patrzeć na problemy podczas kodowania.
Adam...szacunek.
Dziękuję Filip :)
Dobra robota Adam! Wierzę, że tłumaczenie działania mechanizmów silnika JS ma dużą wartość dla oglądających. Abstrakcje tłumaczy się znacznie prościej ale schody zaczynają się jak widz odejdzie od ekranu i coś przestanie działać ;). Wtedy taka wiedza często ratuje sytuację.
Dziękuję Marcin 🙂 Od dawna chciałem nagrać filmy na ten temat. Ciesze się że nareszcie mogłem to zrobić 😊
Świetny odcinek, proszę o więcej z tego typu filmików.
Z pewnością będzie więcej :)
Super! Dzięki za wartościowy materiał :)
Spoko materiał, nie mogę się przyzwyczaić tylko do polskich nazw jak „globalny kontekst wykonania”
Bardzo latwe i zrozumiale dla kazdego wytlumaczenie :) Jak zwykle z reszta :) Super ! dzieki
Dzięki! Nie mogę doczekać się kolejnych filmów. Miłego :)
@@overment Ja rowniez :)
I have seen this raw strength only once before....
Jako początkujący nie wiem czy dobrze zrozumiałem. Kompilator leci sobie z kodem linia po linii, i funkcje first oraz second parsuje, po czym zatrzymuje je jakby w pamięci, a następnie wykonuje przy wywołaniu call?
Skoro Execution Context binduje this'a, wszystkie zmienne to w jaki sposób to się łączy z "arrow functions". Wiadomo, że jest to zupełnie oddzielny potworek, który bodajże binduje this z funkcji w której został zdefiniowany, ale on też znajduje się na stacku czy jest odnotowywane jakoś inaczej? Brakowało mi tego tutaj. I czy będzie może materiał tłumaczący jak działa zarządzanie pamięcią w JS(że jak jakaś funkcja ma odnośnik do zmiennej zmiennej to ta zmienna jest dalej trzymana itp)?
Adam w 3:00 mówi, że kontekst second zostanie wykonany przed kontekstem first. Jednak w konsoli najpierw zobaczymy console.log(''start fisrst"). Czy to nie oznacza, że najpierw wykonał się kontekst funkcji first?
Chyba chodziło o wykonanie wyjścia kontekstu ze stosu. Przynajmniej ja tak to rozumiem.
też mnie to zastanawia, @overment, jak to jest?
@@jerzyhaa polecam wpisz sobie w google loupe - Phillip Roberrs, to jest narzędzie które pokazuje idealnie jak i co jest wykonywane w jakiej kolejności.
I też właśnie to wyłapałem i coś mi tu nie grało. "Że jak to second zostanie wykonane jako pierwsze"
Merytoryczne materiały, ale jak dla mnie trochę za szybko mówisz. Pozdrawiam
Dzięki! Zwrócę na to uwagę w kolejnych filmach 🙂 Faktycznie momentami mówię szybko niż chciałbym. Nie zawsze jestem w stanie na to wpływać bo okazuje się to dopiero po ukończeniu nagrania 🙁
Uwielbiam Twoją twórczość i jak zawsze jestem pod ogromnym wrażeniem. Rozumiem że realizacja 5-6 minutowych filmów jest dla Ciebie wygodna, ale czasami wydłużenie tego czasu mogłoby być zbawienne. Przy niektórych filmikach mam wrażenie zbędnego pośpiechu w tłumaczeniu zawiłych rzeczy. Może nowa seria na próbę która łamałaby te konwenanse i pozwoliłaby się rozgadać?
Bardzo dziękuję :) Co do formy - raczej nie. Być może będę publikował częściej, bo faktycznie zgadzam się z Tobą że trudno jest czasem przekazać wszystko w tak krótkim czasie ale jednocześnie bardzo zależy mi na utrzymaniu takiej struktury filmów.
Ach i jeszcze jedno: czasem duże tempo wynika ze znacznie prostszego faktu. Pomimo tego że nagrałem już prawie 100 filmów, nadal za każdym razem mnie to stresuje. Cóż :) Może kiedyś uda mi się bardziej wyluzować przed mikrofonem. Trzymaj kciuki! :)
Wow! Świetny temat, jednak mam kilka pytań, które mnie dręczą po oglądnięciu:
Jak ma się JS context do kodu asynchronicznego - wspomniane było ze context wykonuje się synchronicznie, czyli kod asynchroniczny przetwarzany jest gdzie indziej? Jak tak, to gdzie?
Usłyszałem kiedyś o JSloops, czy mają one z tym jakiś związek?
Super, że odcinek rodzi pytania, byle nie były głupie :D
Mówią, że nie ma głupich pytań :) A to Twoje dosłownie zasługuje na osobny odcinek. W każdym razie odpowiedź można zamknąć w frazie "Event Loop", czyli pętli zdarzeń. Do pętli zdarzeń trafiają funkcje asynchroniczne i w chwili gdy ich wykonanie dobiega końca, ponownie trafiają na "call stack" (stos) i zostają wykonywane jak wszystkie pozostałe funkcje.
Zakładam że pisząc o JSloops, miałeś na myśli właśnie pętle zdarzeń.
Bardzo dobry artykuł opisujący to zagadnienie: medium.com/@siddharthac6/javascript-execution-of-synchronous-and-asynchronous-codes-40f3a199e687
No i ponowne wow! Dziękuję wielkie za tak szybkie wyjaśnienie i artykuł. Podejrzewałem na chłopski rozum, że event loops (właśnie o nie chodziło) działają w podobny sposób :D Nieocenione jest wiedzieć jak działa coś co piszemy, czy to w IT, matmie, czy w innej dziedzinie.
Można prosić o informację skąd pochodzą te informacje o fazach wykonania programu itp.? Czytam specyfikację i nie mogą znaleźć nic na temat "creation stage", "execution stage", "activation object" itp.? Czy to dotyczy starej wersji JavaScriptu? Uczę się JavaScriptu od kilku dni i zgodnie z tym co jest napisane w specyfikacji kontekst wykonania nie przechowuje żadnych informacji tak jak jest na filmie, tylko ma przypisane środowisko leksykalne (dla globalnego kontekstu wykonania będzie to globalne środowisko), ono przechowuje rekordy środowiskowe, np. globalny rekord środowiska i tam dopiero jest rozdzielenie gdzie trafiają rzeczy zadeklarowane jako var, let, const, funkcje itd. (object environment record, declarative environment record itp.). Nie mogę się doszukać też tego rozróżnienia na jakieś globalne i funkcyjne konteksty wykonania, jedyne miejsce gdzie ktoś o tym pisze to jakiś artykuł na medium.com
JavaScript ma to do siebie, że fundamenty tego języka się nie zmieniają i nigdy nie będzie miało to miejsca. Zawsze wymagana jest wsteczna kompatybilność co z jednej strony jest dobre a z drugiej generuje wiele problemów których naprawdę trudno uniknąć.
Wszystko na temat zakresu oraz kontekstu wykonania znajdziesz w książce You Don't Know JS: github.com/getify/You-Dont-Know-JS/
Człowiek czyta jakieś książki - wszędzie dookoła, trzeba się domyślać, zgadywać - a tutaj proszę, kawa na ławę Można? Można! :)