[JS] javaScript 的重要概念


閉包 (Closure) 是什麼?

閉包是函式的組合,並會將函式宣告時參考到的作用域環境變數保存下來。常被使用在 event-base 的情況 (例如點擊) 和非同步函式中。

自己遇過的情況是,前公司課程中有文法說明,會以音檔搭配動畫呈現,資料型態是 Array,包含文案和顯示時間,作法使用基本的 for 迴圈巡列,並等待給定的秒數後依序顯示。形成了一個 for 包住 setTimeout 的狀況,如果沒有用閉包將狀態存起來,就沒辦法呈現正確的結果。

延伸閱讀:
1. MDN 閉包


原型鍊 (Prototype chain)是什麼?

在創造實體、變數時,JS 會透過 __proto__ 將實體連結到它的原型 (prototype),當使用一個實體找不到的方法或屬性時,JS 機制會透過 __proto__ 一層層往上找,這樣串起來的過程就是原型鍊 (Prototype chain),並可以透過此方式實現繼承的概念。

自己的經驗是,前公司的影片片源除了 Youtube 以外,還有自製的教學影片,兩者會採用不同的 API,但仍有許多共通的方法,例如播放、停止、顯示中英文字幕等。我便將共通的方法寫在 player.prototype 裡,實作時再根據不同的片源將實體 new 出。


this 是什麼?

指向調用函式的物件,找不到時就會指向全域如 window。


bind(), call(), apply()

function.bind() 可以讓 function 中的 this 指向指定的物件,如果要使用要加括號。

call 和 apply 雷同,除綁定外會直接執行,但 apply 參數是吃 array。

函式.bind(物件)();
函式.call(物件, 參數1, 參數2);
函式.apply(物件, [參數1, 參數2]);

延伸閱讀:
1. [筆記] 了解function borrowing和function currying ─ bind(), call(), apply() 的應用


Event Loop

監控 Stack 和 Task Queue,當 Stack 空了會把 Task Queue 裡面的任務拉到 Stack 執行。異步 (如 setTimeout、AJAX 請求) 或滑鼠事件的 Click Callback 都會放在 Queue 中。

延伸閱讀:
1. [筆記] 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式
2. JavaScript 運行機制詳解:再談Event Loop


待續… fetch(), promise, react, redux


發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *