JavaScript 核心觀念(1)－JavaScript是如何運行的呢? (直譯語言、編譯語言的差異)

哈囉大家好，我是Kris

今天要來分享課程中的第一堂課－JavaScript如何運行以及直譯語言與編譯語言的差異在哪裡


因為電腦無法直接看懂原始碼，也就是我們工程師所撰寫出來的程式碼

所以會經過一些處理來讓電腦瞭解以後再去運行。


直譯語言和編譯語言的差異

直譯語言：執行前未經編譯，像是JavaScript就是直譯語言哦。

好處：彈性比較高、不需要預先定義型別。

＊錯誤會直接反映在環境中，ex：chrome裡的console


編譯語言：會預先編譯再運行。

好處：預先編譯就可以預先除錯、語言效能比較好。


＊大多時候我們在說某種語言為編譯或直譯語言時，指的是【大多數】並非全部。

就像是我們說JavaScript是直譯語言，不代表JavaScript不能有編譯器，反之亦然。



JavaScript直譯器轉換過程



語法基本單元化(Tokenizing)：將JS裡的標點符號、詞彙先分別解析出來。   ＊JS=JavaScript

抽象結構樹AST(Abstract Syntax Tree)：將整個原始碼的結構定義出來。

代碼生成：最後一步才會生成代碼。

生成出來的代碼會根據環境的不同稍微有不一樣的地方。

＊在結構樹的階段尚未運行程式碼


可以利用這個網站來更深入的瞭解整個轉換過程👇

https://esprima.org/demo/parse.html#

接下來操作並解釋給大家看

首先在左側輸入程式碼 var 變數 = '內容';　這邊我輸入的是【var ming = '小名';】




右側的頁籤選到Tokens，可以看到拆成了各個不同的標點符號以及詞彙。
Keyword是關鍵字，內容（value）為"var"；Punctuator是標點符號。

有點像小時候寫作文時，需要先瞭解各個詞語的意思以及不同的標點符號代表什麼意思，
Tokenizing就是在做這樣子的事情，先拆開分類但還不會瞭解我們是在定義一個變數。


點選最左側：結構樹Tree
轉換成電腦看得懂的方式，Tree有點像是JSON格式。


VariableDeclarator：定義一個變數
kind：定義變數的方法是var
Identifier：變數的字詞；name：內容是ming
然後把'小名'這個詞彙賦予進變數。

到這裡才會知道我們正在定義一個變數。
目前這個步驟只是把結構定義出來，但是尚未執行！在代碼生成之後才會執行。


額外補充

沒有使用var、let來宣告變數的話會變成全域變數。
透過結構樹來瞭解兩者是完全不同的結果。
沒有使用var、let宣告時，用的是AssignmentExpression是一個assign的表達式
是直接把'小名'這個詞附在ming變數上面，根本沒有做宣告的動作。
可以透過這個方法，來瞭解在JS是宣告了一個變數或者是賦予一個值而已。

額外補充二

使用var宣告變數時，如果不在特定的範疇，則為全域變數。
使用var跟不使用var都可能是全域變數，那到底差別在哪裡呢?

有無宣告 var是有很大的差異，最大差異在於「該變數可不可以被刪除」

如果你沒有使用 var 宣告變數，那麼就會被當作物件新增進入到 window 底下，
此時你就可以使用 delete 語法刪除該屬性（delete 是刪除物件屬性的方法）
c = 1;
delete c; // 成功刪除

所以若用了 var 宣告變數之後，那麼就無法透過 delete 刪除。

var c = 1;
delete c; // 失敗;無法刪除

所以這邊的重點觀念在於 「window 是一個物件，若不透過 var 宣告變數，那麼就會被當作物件新增」。


好~今天就到此告一段落
期許自己持續努力，成為更好的人。
大家一起努力💪💪💪

评论

发表评论

此博客中的热门博文

JavaScript 核心觀念(5)－執行環境(Execution context)與執行堆疊(Execution stack)

图片
 嗨，大家今天開心嗎? 我是Kris，持續發筆記來到了第六篇，有慢慢習慣這個方式來幫助自己釐清觀念 可以在上課以後再進行複習一次，加深印象，有感受到自己在慢慢進步。 持之以恆，加油！ 今天要來講執行環境&執行堆疊，這也是面試考題裡很常出的觀念題目哦！ 執行環境（Execution context） 函式的作用域是限制在function內 （變數可以使用的範圍） 但是如果沒有執行函式的話是不會有任何變數產生的！ 執行以後會產生一個執行環境以及限制作用域的功能。 函式撰寫時就確定作用域，執行它才能產生執行環境，這個執行環境才有屬於它的變數跟this。 this會隨著不同的執行環境改變（後面課程會再詳細介紹this） ＊函式呼叫以後才會產生執行環境，反覆呼叫就會一直產生新的執行環境＊ ＊ 函式宣告的變數，只在函式內能被讀取，包括宣告在函式內的函式！！＊ global全域也有自己的全域執行環境 網頁一開啟 or 後端Node.js 一開啟，就會建立全域執行環境 同時會產生全域變數→ 瀏覽器：window；Node.js：global 也會有全域執行環境的this，內容會等於window或是global。 執行堆疊 Execution stack 用執行的順序來堆疊，跟函式宣告的順序沒有關係。 就是JS執行以後，哪個函式先運行，後運行的就一層一層向上堆疊，可以更加瞭解JS是如何運行的。 以下程式碼來當範例   網頁一開起就會建立全域執行環境 然後這段codec會先執行doSomething() → sayHi() 所以執行堆疊的順序如下方影片所示 3.sayHi()執行環境  A 2.doSomething()執行環境  B 1.全域執行環境 照數字123順序執行堆疊，照英文字母ABC離開執行環境，最後回到全域執行環境。 補充說明 如何用chrome開發者工具看執行堆疊以及目前作用域 開啟chrome → 執行程式 → 按下F12開啟開發者工具 → 點選console旁邊的sources頁籤 → 按下暫停鍵⏸️ → 按下F5重整網頁 → 按下一步逐步觀察JS執行堆疊跟作用域的變化。 call Stack：執行堆疊；Scope：目前作用域；(anonymous)：代表全域執行環境 ＊在程式碼呼叫doSomething();的上一行加入debugger，可強制停在doSo
阅读全文

JavaScript 核心觀念(7)-執行環境與作用域-提升Hoisting

图片
嗨，大家好嗎? 我是Kris 今天要來分享一個我個人認為很有趣的觀念 以下截至  MDN  說明 提升（Hoisting）是在 ECMAScript® 2015 Language Specification 裡面找不到的專有名詞。它是一種釐清 JaveScript 在執行階段內文如何運行的思路（尤其是在創建和執行階段）。然而，提升一詞可能會引起誤解：例如，提升看起來是單純地將變數和函式宣告，移動到程式的區塊頂端，然而並非如此。變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。 所以提升只是一個用來釐清JS如何運行的觀念，瞭解JS創造階段、執行階段做了什麼 對程式碼的結果又有什麼影響呢? 首先 JS在函式、變數宣告時，會先建立一個記憶體空間來存放他們的key&value，如下圖 var   a  =  '1'; 在創造階段時建立a的儲存空間，但尚未賦予值，在執行階段時才會賦予值 所以可以將它看作這樣  ↓ //創造階段 var a; //執行階段 a = '1'; 函式陳述式在創造階段就會優先載入，並且將整個函式內容一起寫入 我們直接來看一個範例碼 * 函式比變數有更高的優先權 ，所以會比變數更優先被建立 * 所以，答案如下 console.log(myName);   //小明 在創造階段時，myName尚未被賦予值，在那個時候會儲存的值為undefined。 是因為JS必須告訴我們它已準備好記憶體空間，若沒有給值會出現Error。 因此！ 上面的範例程式碼，並不會進入if條件式！ If裡的 myName 在創造階段時值為 undefined，故判斷式不會執行 後面 myName 又被賦予“小明”，所以myName 的值會印出小明 ＊if(myName)  是在判斷myName是否為 falsy值，是的話不會執行，否的話才執行 myName是falsy值，所以不會進入if(myName)的判斷式裡。 ＊常見 falsy值有 false、null、undefined、NaN、 0、 -0、""、'' ＊參考範例： https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy 額外補充 一．！是一個NOT語句，會將結果反轉
阅读全文

JavaScript 核心觀念(6)-執行環境與作用域-範圍鍊

图片
嗨~大家好，我是Kris 今天要來說明 為什麼明明宣告在外層的變數甚至是不同地方的函式，卻可以正確的呼叫與執行。 範圍鍊 函式裡面沒有需要的變數時，就會向外層尋找 變數在外層宣告，但內層卻可以取得 JavaScript是語法作用域，所以並不會與執行堆疊有任何關係。 因此fu1()不會因為他是在fu2()下被呼叫 就去尋找fu2()裡的var value = 2;     而是會去外層尋找外面的var value =1;。 範圍鍊真正的意思是「當函式本身沒有相對應的變數或函式時，就會向外層去尋找」 而這個尋找的過程就是【範圍鍊】，因此這邊與執行堆疊、執行環境不會有任何直接關係。 JavaScript 因為是語法作用域的關係，在程式碼撰寫完畢時，就已經決定了作 用域。 以下提供幾個範例，大家可以跟著做做看哦 不同情況下分別會列印出什麼呢? 答案放在最下方 1. 2. 3. 4. 5. 解答分隔線 ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.  哈囉~老媽 2.  哈囉~老媽 3.  哈囉~漂亮阿姨 4.  哈囉~老爸 5.  哈囉~老媽 //1. 只執行sayHi()，sayHi()裡沒有person此變數，因此向外層尋找，找到全域變數的'老媽' 其他兩個fn裡的變數皆是區域變數，不影響sayHi() //2. doMorningWork()裡的變數為區域變數，不影響sayHi(); *函式沒有被呼叫就不會執行哦，所以meetAuntie()不會執行 //3. 執行meetAuntie()時內部有person，故印出'漂亮阿姨' 不被doMorningWork()的'老爸'影響 //4. 執行meetAuntie()時內部沒有person變數，所以向外層doMorningWork()尋找所以印出'老爸' //5. 執行meetAuntie()時內部沒有person變數，所以向外層doMorningWork()尋找也找不到時 就會再
阅读全文