【課程筆記】JS#1：JavaScript運作原理 ─ 深入研究之前，先了解全局
deconstructing the monster definition
在深入研究之前，先了解全局，JavaScript重點概觀
§ High-level 高階語言 §
首先，所有在電腦上執行的程式都需要記憶體或CPU這一類的硬體資源來讓他們得以運作，而像低階程式語言(例如：C語言)需要手動管理存放資源，例如以 malloc() 跟 free() 等低階函式來控管記憶體權限，而高階語言(例如：JavaScript、Python)則因為抽象化(Abstraction)的特性，讓我們可以省去這些麻煩的指定步驟，也因為更接近人類的語言而更易於學習，但缺點就是程式效率永遠不如低階語言的快速。抽象化的意義在MDN裡，有著這樣的解釋：
為某個複雜東西建立簡單的模型，藉以代表其最重要的概念或特質，且該模型建立方式極易於搭配我們的程式設計用途。
§ Garbage-collected 回收機制 §
相較於低階語言必須手動管理記憶體，當JavaScript宣告變數時，就會自動分配空間並移除不再使用的物件以釋放儲存空間，而這就稱為回收機制（garbage-collected）。但這個自動化的回收流程，也往往會使開發人員產生不用理會「記憶體管理」的錯誤認知。當我們談到程式語言，共有的記憶體生命週期認知，幾乎是一樣的。
- 配置你的程式所需的記憶體空間
- 使用配置到的記憶體空間(讀，寫)
- 當不再使用時，釋放已被配置的記憶體空間
-垃圾回收器(garbage collector)
在Javascript中，有一個垃圾回收器(garbage collector)，他的工作就是追蹤記憶體的分配情形，來盡量達到「釋放」不再使用的記憶體空間任務。
在Javascript中，有一個垃圾回收器(garbage collector)，他的工作就是追蹤記憶體的分配情形，來盡量達到「釋放」不再使用的記憶體空間任務。
但由於自動判斷不再使用記憶體空間這件事其實本質上是「不可判定的」，因為你要如何去確認他不會再被使用呢？而面對這樣的問題，就衍生出Reference-counting garbage collection作為演算法機制，也就是把「這個物件再也不會被使用」的較廣定義限縮為「沒有其他物件需要再訪問這個物件」也就是「相對」而言不被需要的認定方式來作為判斷依據，以將他視為可回收記憶體的垃圾。MDN：Reference-counting garbage collection範例
§ Interpreted or just-in-time compiled §
從抽象語言轉換為機器語言的方法，而JavaScript是一個直譯語言，或更應該說是Just-in-time compilation即時編譯語言。( 延伸閱讀：【課程筆記】JS#2：JavaScript引擎與JavaScript的運行環境 ─ 什麼？JavaScript早就不只是直譯式語言了？！(feat:JavaScript Engine、JavaScript Runtime)）§ Multi-paradigm 多範式語言 §
和C++語言一樣，JavaScript語言是一個多範式語言，所謂範式(paradigm)是一種建構程式碼的方式和整體思維方式，取決於編碼的風格和技術。其中JavaScript分別支援Procedural programming(指令式程式設計)、Object-oriented programming (OOP)(物件導向程式設計)、Functional programming (FP)(函式程式設計)，除此之外，也可以總的分為Imperative(命令式)或Declarative(聲明式)。
而其實很多程式語言都只支援某一種類的程式設計(例如：OOP、PP、FP)，但對Javascript而言，卻是可以三種混合使用，可見JavaScript的靈活性與通用性。(所以讓我們可以想幹嘛就幹嘛 (大誤
而要介紹何謂基於原型Prototype-based，我們可以以常見的陣列操作來比喻
而其實很多程式語言都只支援某一種類的程式設計(例如：OOP、PP、FP)，但對Javascript而言，卻是可以三種混合使用，可見JavaScript的靈活性與通用性。(所以讓我們可以想幹嘛就幹嘛 (大誤
§ Prototype-based(基於原型) object-oriented (物件導向) §
首先，幾乎除了原始值(primitive values)，例如：數字、字串以外，在JavaScript裡的所有元件都可以被視為一個物件(例如：陣列、物件、函式)，這也是為什麼他們可以被視為獨立元件，也可以互相被呼叫或使用。而要介紹何謂基於原型Prototype-based，我們可以以常見的陣列操作來比喻
例如陣列中的push方法，(為什麼用push就可以改變陣列?)
這是因為原型繼承（prototypal inheritance）
當我們創建一個陣列，我們是從一個叫做陣列藍圖(array blueprint)的模板基礎上創建陣列的，也就是所謂的原型（Prototype）(不然他怎麼可以隨隨便便生成陣列？對吧？)
而這樣的陣列藍圖，包含了所有陣列的方法，所以我們有了陣列後，可以輕鬆使用例如使用array.push()、array.pull()等，去操作陣列，這是因為在使用陣列藍圖時，也就繼承（inherit）了藍圖上的操作方法(method)。但當然這只是簡單介紹，未來有機會會再深入這個議題去討論。
而這樣的一級函式並不是只有JavaScript專屬的特性，但因為JavaScript有，所以JavaScript hen 棒。而這也是多範式語言中的其中一項Functional programming (FP)(函式程式設計)。
當我們創建一個陣列，我們是從一個叫做陣列藍圖(array blueprint)的模板基礎上創建陣列的，也就是所謂的原型（Prototype）(不然他怎麼可以隨隨便便生成陣列？對吧？)
而這樣的陣列藍圖，包含了所有陣列的方法，所以我們有了陣列後，可以輕鬆使用例如使用array.push()、array.pull()等，去操作陣列，這是因為在使用陣列藍圖時，也就繼承（inherit）了藍圖上的操作方法(method)。但當然這只是簡單介紹，未來有機會會再深入這個議題去討論。
§ First-class functions 一級函式 §
一級函式簡言之，也就是在該程式語言中，函式可以被視為「變數」被當作參數傳遞到另一個函式，或在另一個函式中被當作回傳值（return），或被當作值一般，被指定到一個變數當中，或也可以被放置在物件中。而這樣的一級函式並不是只有JavaScript專屬的特性，但因為JavaScript有，所以JavaScript hen 棒。而這也是多範式語言中的其中一項Functional programming (FP)(函式程式設計)。
所謂函示可以被視為變數傳遞，讓我們看以下範例
範例：Modal
const closeModal()=>{
modal.classList.add("hidden")
overlay.classList.add("hidden")
}
overlay.addEventListener("click",closeModal)
註1：不是 closeModal() ，因為這樣一來closeModal會馬上被執行，而不是等到觸發"click"事件才被執行
註2：傳入closeModal，就是函式被作為一個單純的參數被傳入其中！
§ Dynamic 動態類型語言 §
在JavaScript中，我們不會去指定資料類型(例如數字、字串等)，而是當JavaScript引擎執行代碼時自動辨認該資料類型，於是當我們為變數重新賦值時，資料類型又可以自動且輕易地轉換，這就是動態類型(dynamically-typed)的意義。簡言之，就是允許動態轉換。範例：
let x = 23 let y = 19 x = "Emily"x從原本的number，轉換為string
而談到動態語言，相較於JavaScript，其他需要手動定義類型的語言(例如：C、Java)則可以避免動態轉換所造成的各種錯誤，而這也是為什麼許多人說，JavaScript應該強化類型的原因，因為很容易發生錯誤。而如果想要使用類型版的JavaScript，可以學習TypeScript
§ Single-threaded 單執行序 Non-blocking event loop 非阻塞事件循環 §
首先我們需要先了解JavaScript是單執行序，也就是一次只能執行一件事情，但若遇上需要同時間處理多項事件該怎麼辦呢？這就需要併發模型（concurrency model）來處理安排多工的情形。而要達到這樣的效果，就需要事件循環（event loop）的幫助，也就是先在後台執行任務，並當執行完畢後，再將他們重新放回主線程上，這就是JavaScript的單線程非阻塞事件循環併發模型。(JavaScript's non-blocking event loop concurrency model with a single thread.)，說起來超饒口，只是先有一個基本印象，會在接下來逐一單元筆記整理。
這篇文章，只是做為整個JavaScript重點概觀的一個紀錄，接下來，將會依照課程的進行，依序記錄重點細節，如果你跟我依樣初學JavaScript，真的很推薦在Udemy上購買Jonas的課JavaScript zero to expert！雖然已經從初學Javascript到可以應用node.js，但跟著每一小節學習，仍讓我看見之前從未注意到的細節，也學習了Jonas的編寫習慣，來讓自己成為更好的開發人員與學習者。
也歡迎跟著我對於 How javascript works behind the senes 筆記，一起逐步深入了解Javascript的原理喔！
留言
張貼留言