# 執行環境與詞彙環境 ## Syntax parsers 語法解析器 A program that reads your code and determines what it does and if its grammar is valid. Your code isn't magic. Someone else wrote a program to translate it for the computer. ![](https://i.imgur.com/yAxd60a.png) ## Execution contexts 執行環境 - A wrapper to help manage the code that is running. - There are lost sof lexical environments. Which one is currently running is managed via execution contexts. It can contain things beyond what you've written in your code. ## Lexical environment 詞彙環境 - Where something sits physically in the code you write - "Lexical" means 'having to do with words or grammar'. A lexical environment exists in programming languages in which where you write something is important. - 如果提到這個,意思是在討論它被寫在哪裡? 它的周圍環境是甚麼? ## Name/value Pair - A name which maps to a unique value - The name may be defined more than once, but only can have one value in any given context. That value may be more name/value pairs. - ![](https://i.imgur.com/YancReW.png) ## Object - A collection of name value paris - The simplest definition when talking about **Javascript** - ![](https://i.imgur.com/QzmNJH5.png) - ![](https://i.imgur.com/eBDJraF.png) ## The global environment and the global object ### Global、this 是 Javascript 引擎自動幫你生成的 - Glogal means "Not inside a Function" - Javascipt 的 Global 是 window,node 的 global 是別的東西。 - outer environment - ![](https://i.imgur.com/arrWs2G.png) ## The execution context: Creation and hoisting Execution Context 被分為兩階段創造,第一階段是創造(creation)階段,這個階段會產生 Global Object, 'this', Outer Environment 最後會 Steup memory space for Variables and Functions(這就是 Hoisting)。 表示在執行程式碼之前已經為變數與函數在記憶體中創造空間,所以當程式被逐行執行時,它可以找到它們。 不過變數的情況有點不同,變數都會先被指定為 "undefined",然後在執行的時候才會被附值,而函式則會被完整儲存起來。 ## Undefined - Javascript 在創造執行環境的第一階段時會為變數設定初始值 `undefined`,如果是一個未曾被設定為初始值的東西則會得到錯誤訊息 `Uncaught ReferenceE: something is not defined`,因為它沒辦法在已經創造的記憶體之中找到這個東西。 - `undefined` 是一個特殊關鍵字,它是一種值,會是創造階段的變數之預設值。 - 永遠不要設定任何東西為 `undefined`,將會有幫助你除錯,只要一看到 `undefined` 時就可以理解為不曾為其附值 ## Execution Context Runs code (Execution phase 執行階段) 逐行執行 ## Single threaded & synchronous execution - (單執行緒、同步執行),Javascript 是單執行緒、同步執行的 - Single threaded - One command at at a time - Under the hood of the browser, maybe not,但從我們的角度來說 Javascript 是單執行緒的 - Synchronous execution - One at a time - And in order ## Invocation Running a function In javascript, by using parenthesis () ## Variable environment Where the variables live. And how they relatve to each other in memory ## scope chain - Javascript 會依照 Lexical environment 來尋找變數 (此例是尋找變數),從該 Execution contexts 開始往外面找 outer reference - 每個 Execution contexts 都會有 outer reference (此例的 function a 的 outer reference 是 global) - 與函式呼叫的位置沒有關係。 ```javascript= function a(){ console.log(myVar) // 1 } function b(){ var myVar = 2 a() } var myVar = 1 b() ``` ## Scope - Where a variable is available in your code - And if it's truly the same variable, or a new copy ## let - Can be use instead of var - Allow JavaSciprt engine to use block scoping - During the execution phase where it's created, the variable is still placed into memory and set to `undefined`. Hoever, you're **NOT** allowed to use let until the lin of code is run. - When `let` is declared inside the block, it's only available inside that block at that period of time for the running code. ## Asynchoronous more than one at a time ![](https://i.imgur.com/ohCQoGG.png) JavaScript 會先執行 execution stack 的 event,等到完成之後才會去執行 event queue,等到結束時,會持續查看 event queue 的迴圈,這個過程稱為 continuous check。 在 Javascript 提到的非同步其實是在 Javascript 外的引擎執行的,Javascript 本身是同步的。 ###### tags: `WierdJavascript`