每個JavaScript工程師都應懂的33個概念

摘要： 基礎很重要啊！

• 原文：33 concepts every JavaScript developer should know
• 譯文：每個 JavaScript 工程師都應懂的33個概念
• 作者：stephentian

Fundebug經授權轉載，版權歸原作者所有。

簡介

這個專案是為了幫助開發者掌握 JavaScript 概念而創立的。它不是必備，但在未來學習（JavaScript）中，可以作為一篇指南。

本篇文章是參照 @leonardomso 創立，英文版專案地址在這裡。
由於原版資源都要翻牆，所以本人創立一箇中文版，附上關於這些概念在國內的一些文章和視訊。
若有覺得更好的文章或者視訊，可以貢獻出來，覺得有誤的，請聯絡我刪除。

更新

若有覺得更好的文章或者視訊，可以貢獻出來，覺得有誤的，請聯絡我刪除。

• 文章的排序優化，前面的文章是介紹概念，後面的文章是深入解讀。
• 將原文的 “高階函式” 和 “map, reduce, filter” 合併為 “map, reduce, filter 等高階函式”
• 增加 “promise” 概念(替換刪除的 “高階函式”)
• 2018-10-24 更新：@BuptStEve 貢獻的三篇關於“函數語言程式設計”方面的文章

目錄

• 呼叫堆疊
• 原始型別
• 值型別和引用型別
• 隱式, 顯式, 名義和鴨子型別
• == 與 ===, typeof 與 instanceof
• this, call, apply 和 bind
• 函式作用域, 塊級作用域和詞法作用域
• 閉包
• map, reduce, filter 等高階函式
• 表示式和語句
• 變數提升
• Promise
• 立即執行函式, 模組化, 名稱空間
• 遞迴
• 演算法
• 資料結構
• 訊息佇列和事件迴圈
• setTimeout, setInterval 和 requestAnimationFrame
• 繼承, 多型和程式碼複用
• 按位操作符, 類陣列物件和型別化陣列
• DOM 樹和渲染過程
• new 與建構函式, instanceof 與例項
• 原型繼承與原型鏈
• Object.create 和 Object.assign
• 工廠函式和類
• 設計模式
• Memoization
• 純函式, 函式副作用和狀態變化
• 耗效能操作和時間複雜度
• JavaScript 引擎
• 二進位制, 十進位制, 十六進位制, 科學記數法
• 偏函式, 柯里化, Compose 和 Pipe
• 程式碼整潔之道

1. 呼叫堆疊

文章

• Call Stack — MDN
• [[譯] JavaScript 如何工作：對引擎、執行時、呼叫堆疊的概述 —— 掘金](https://juejin.im/post/5a05b4576fb9a04519690d42#comment)
• [[譯] 理解 JavaScript 中的執行上下文和執行棧 —— 掘金](https://juejin.im/post/5ba32171f265da0ab719a6d7)
• 這一次，徹底弄懂 JavaScript 執行機制 —— 掘金
• 解讀 JavaScript 之引擎、執行時和堆疊呼叫 —— 開源中國
• Tasks, microtasks, queues and schedules —— Jake Archibald

視訊

• What is the event loop anyway? —— 騰訊視訊(英文字幕)
• Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili
• JS 中的變數提升、堆疊記憶體及閉包詳解 —— Acfun
• 事件迴圈模型 —— PHP 中文網

2. 原始型別

文章

• 原始資料 —— MDN
• ECMAScript 原始型別 —— W3school
• How numbers are encoded in JavaScript —— Dr. Axe
• 每一個 JavaScript 開發者應該瞭解的浮點知識 —— 顏海鏡
• JavaScript 標準參考教程(基本語法之數值) —— 阮一峰
• The Secret Life of JavaScript Primitives —— Angus Croll

視訊

• javascript 六種資料型別 —— 慕課網
• javascript 視訊教程(資料型別) —— PHP 中文網

3. 值型別和引用型別

文章

• ECMAScript 引用型別 —— W3school
• js 中的值型別和引用型別的區別 —— 部落格園
• JavaScript 的值傳遞和引用傳遞 —— FunDebug
• Primitive Types & Reference Types in JavaScript —— Bran van der Meer
• JavaScript: Passing by Value or by Reference —— CSDN
• js 值引用和值複製 —— SegmentFault
• js- 引用和複製(傳值和傳址) —— CSDN

4. 隱式, 顯式, 名義和鴨子型別

文章

• ECMAScript 型別轉換 —— W3school
• JavaScript 的怪癖 1：隱式型別轉換 —— justjavac
• JavaScript 運算子規則與隱式型別轉換詳解 —— 掘金
• 聊一聊 JS 中的隱式型別轉換 —— SegmentFault
• 有趣的 JavaScript 隱式型別轉換 —— 部落格園
• JavaScript 顯式型別轉換與隱式型別轉換 —— CSDN
• 你不知道的 JavaScript（中卷）強制型別轉換 —— 簡書
• 你懂 JavaScript 嗎？#8 強制轉型 —— cythilya
• 動態型別語言和鴨子型別 —— 曾探
• Nominal & Structural Typing —— flow
• What exactly is Type Coercion in Javascript? —— stackoverflow
• You Don`t Know JS: Types & Grammar —— github

視訊

• javascript 隱式轉換 —— 慕課網
• Javascript 基礎加強-型別轉換 —— 黑馬程式設計師

5. == vs ===, typeof vs instanceof

文章

• JavaScript 中的相等性判斷 —— MDN
• js 中 == 和 === 的區別 —— 掘金
• == vs === in Javascript —— CSDN
• 深入理解 javascript 之 typeof 和 instanceof —— CSDN
• JavaScript 的 typeof 的用途 —— justjavac
• 一張圖看懂 Function 和 Object 的關係及簡述 instanceof 運算子 —— 掘金
• 淺談 instanceof 和 typeof 的實現原理 —— 掘金
• js 中 typeof 與 instanceof 用法 —— 部落格園

6. this, call, apply 和 bind

文章

• Javascript 的 this 用法 —— 阮一峰
• 學會 JS 的 this 這一篇就夠了，根本不用記 —— 簡書
• [[譯] this（他喵的）到底是什麼 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金](https://juejin.im/post/5b9f176b6fb9a05d3827d03f)
• this、apply、call、bind —— 掘金
• 使用 call、apply 和 bind 解決 js 中煩人的 this，事件繫結時的 this 和傳參問題 —— 部落格園
• call、apply 和 bind 的原生實現 —— github
• 詳解 JS 中的 this、apply、call、bind(經典面試題) —— 指令碼之家

視訊

• JavaScript 關於 this 關鍵字解釋 —— 愛奇藝
• JS 關於作用域閉包和 this 的綜合面試題 —— 百度視訊
• js 物件導向閉包陣列 12.函式中的 this —— 樂視視訊
• 1.3.10-this 指向及 this 應用 —— 樂視視訊
• 珠峰培訓 JavaScript 開發課程：關於 this 關鍵字、閉包作用域 —— 網易雲課堂

7. 函式作用域, 塊級作用域和詞法作用域

文章

• 變數作用域與解構賦值 —— 廖雪峰
• 學習 Javascript 閉包（Closure） —— 阮一峰
• JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault
• JavaScript 深入之詞法作用域和動態作用域 —— 掘金
• 深入理解閉包之前置知識 → 作用域與詞法作用域 —— 掘金
• What is lexical scope? —— stackoverflow
• You Don`t Know JS: Scope & Closures —— Kyle Simpson

8. 閉包

文章

• 閉包 —— MDN
• ECMAScript 閉包（closure）—— w3school
• 學習 Javascript 閉包（Closure） —— 阮一峰
• 閉包 —— 廖雪峰
• 一次性搞懂 JavaScript 閉包 —— 簡書
• JavaScript 閉包 —— SegmentFault
• js 匿名自執行函式中閉包的高階使用 —— 掘金
• 高效使用 JavaScript 閉包 —— 掘金

視訊

• JavaScript 閉包和閉包面試題 —— 愛奇藝
• js 物件導向閉包陣列 11.閉包 —— 樂視
• 白賀翔_函式(閉包) —— 樂視

9. map, reduce, filter 等高階函式

文章

• 高階函式 —— 廖雪峰
• ES5 中新增的 Array 方法詳細說明 —— 張鑫旭
• 一張圖看懂 JavaScript 中陣列的迭代方法：forEach、map、filter、reduce、every、some —— 掘金
• Transducing（上）－《JavaScript 輕量級函數語言程式設計》 —— SegmentFault
• JavaScript 函數語言程式設計（三） —— @BuptStEve

10. 表示式和語句

文章

• js 表示式與語句 —— 部落格園
• JS 表示式和語句的區別 —— SegmentFault
• JavaScript 中的表示式（expression）和語句/宣告（statement） —— CSDN
• 重讀 Axel 的 Javascript 中的 Expression vs Statement 一文 —— SegmentFault
• Expressions versus statements in JavaScript —— Dr. Axel

11. 變數提升

文章

• JavaScript 變數提升 —— 菜鳥教程
• ES6 變數作用域與提升：變數的生命週期詳解 —— 掘金
• [[翻譯] JavaScript Scoping and Hoisting —— SegmentFault](https://segmentfault.com/a/1190000004345355#articleHeader5)
• JavaScript Scoping and Hoisting —— Ben Cherry

12. Promise

文章

• 使用 promises —— MDN
• Promise —— MDN
• Promie — 廖雪峰
• JavaScript Promise：去而復返 —— 司徒正美
• (上面的原文)JavaScript Promise：簡介 —— Web Fundamentals
• 1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》 —— justjavac
• JavaScript Promise 迷你書（中文版）
• JavaScript 進階之路——認識和使用 Promise，重構你的 Js 程式碼 —— 部落格園

視訊

• Promise 入門 —— 慕課網

13. 立即執行函式, 模組化, 名稱空間

文章

• Javascript 模組化程式設計（一）：模組的寫法 —— 阮一峰
• javascript 模組化程式設計-詳解立即執行函式表示式 —— 簡書
• Javascript 的匿名函式與自執行 —— 掘金
• 前端模組化——技術選型 —— SegmentFault
• 談談 Js 前端模組化規範 —— SegmentFault

14. 遞迴

文章

• 求解釋 js 遞迴 —— SegmentFault
• JavaScript 中的遞迴 —— 掘金
• 遞迴（上）－《JavaScript 輕量級函數語言程式設計》 —— 掘金
• 遞迴（下）－《JavaScript 輕量級函數語言程式設計》 —— 掘金
• 尾呼叫和尾遞迴 —— 掘金
• 幾個經典遞迴問題用 js 實現 —— CSDN
• 遞迴函式的幾個例子 —— CSDN

15. 演算法

文章

• 十大經典排序演算法總結（JavaScript 描述） —— 掘金
• 在 JavaScript 中學習資料結構與演算法 —— 掘金
• JS 中可能用得到的全部的排序演算法 —— 掘金
• JS 家的排序演算法 —— 簡書
• 前端常見演算法的 JS 實現 —— SegmentFault
• 前端面試中的常見的演算法問題 ——蒲小花的部落格

視訊

• Javascript 實現二叉樹演算法 —— 慕課網

16. 資料結構

文章

• 來我們淺談一下 js 的資料結構 —— 簡書
• JavaScript 中的演算法與資料結構 —— 簡書
• 學 JS 必看-JavaScript 資料結構深度剖析 —— 大道至簡的部落格
• js 中基礎資料結構陣列去重問題 —— 掘金

視訊

• JavaScript 資料結構-運算子 —— 樂視

17. 訊息佇列和事件迴圈

文章

• 併發模型與事件迴圈 —— MDN
• JavaScript 執行機制詳解：再談 Event Loop —— 阮一峰
• 深入理解 JavaScript 事件迴圈 —— 部落格園
• 深入淺出 Javascript 事件迴圈機制 —— 知乎
• JS 事件迴圈機制（event loop）之巨集任務、微任務 —— SegmentFault
• JavaScript：徹底理解同步、非同步和事件迴圈 —— SegmentFault
• 從瀏覽器多程式到 JS 單執行緒，JS 執行機制最全面的一次梳理 —— 掘金

18. setTimeout, setInterval 和 requestAnimationFrame

文章

• Window setTimeout() 方法 —— 菜鳥教程
• Window setInterval() 方法 —— 菜鳥教程
• 關於 setTimeout —— 掘金
• 你不知道的 Javascript：有趣的 setTimeout —— 掘金
• 原來你是這樣的 setTimeout —— 掘金
• setTimeout() 和 setInterval() 本質區別在哪裡？ —— SegmentFault
• book: window.requestAnimationFrame —— MDN
• requestAnimationFrame 知多少？ —— 部落格園
• CSS3 動畫那麼強，requestAnimationFrame 還有毛線用？ —— 張鑫旭
• 「JavaScript 定時器」setInterval、setTimeout 和 requestAnimationFrame 淺析 —— SegmentFault
• 翻譯：setInterval 與 requestAnimationFrame 的時間間隔測試 —— SegmentFault
• 阿里前端面試題：requestAnimationFrame 實現類似 setInterval 的計時器 —— SegmentFault

視訊

• setTimeout 和 setInterval —— 優酷

19. 繼承, 多型和程式碼複用

文章

• JS 物件導向程式設計之：封裝、繼承、多型 —— 部落格園
• Javascript 的繼承與多型 —— 簡書
• js:物件導向程式設計，帶你認識封裝、繼承和多型 —— 掘金
• JavaScript 中的“多繼承” —— 掘金
• 程式碼複用模式 —— github
• 深入理解 JavaScript：程式碼複用模式(推薦篇) —— 湯姆大叔
• 深入理解 JavaScript：程式碼複用模式(避免篇) —— 湯姆大叔

20. 按位操作符, 類陣列物件和型別化陣列

文章

• 按位操作符 —— MDN
• 類陣列物件 —— MDN
• 型別化陣列 —— MDN
• JavaScript ArrayBuffer 淺析 —— 部落格園

21. DOM 樹和渲染過程

文章

• 如何建立一個 DOM 樹 —— MDN
• HTML DOM 節點 —— W3school
• DOM 概述 —— 阮一峰
• 《JavaScript 闖關記》之 DOM（上）—— 掘金
• 《JavaScript 闖關記》之 DOM（下）—— 掘金
• 掌握 DOM 操作 —— 掘金
• 操作 DOM —— 廖雪峰
• 原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的 —— 掘金

視訊

• DOM 探索之基礎詳解篇 —— 慕課網
• DOM 事件探祕 —— 慕課網
• jQuery 基礎(二)DOM 篇 —— 慕課網
• JS 操作 DOM 物件屬性和方法 —— 愛奇藝

22. new 與建構函式, instanceof 與例項

文章

• 建構函式與 new 命令 —— 阮一峰
• Javascript 物件導向程式設計（二）：建構函式的繼承 —— 阮一峰
• 完整原型鏈詳細圖解(建構函式、原型、例項化物件) —— CSDN
• JavaScript 中建構函式與 new 操作符的例項詳解 —— PHP 中文網
• 建構函式、例項、原型、原型鏈之間的關係 —— CSDN
• 深入理解 JS—instanceof 和原型鏈 —— CSDN
• 前端基礎進階（九）：詳解物件導向、建構函式、原型與原型鏈 —— 簡書
• js 用 new 例項化物件與直接呼叫的 this 的區別 —— 簡書
• JavaScript 並非所有的東西都是物件 —— justjavac
• JavaScript instanceof 運算子深入剖析 —— IBM

視訊

• 改良版的建構函式 —— 樂視

23. 原型繼承與原型鏈

文章

• 繼承與原型鏈 —— MDN
• 建構函式、原型與原型鏈 —— github
• 原型及原型鏈 —— github(1269 Star)
• 理清 javascript 中的物件導向(一) 原型繼承 —— SegmentFault
• JavaScript：繼承和原型鏈(譯) —— justjavac
• 三張圖搞懂 JavaScript 的原型物件與原型鏈 —— 部落格園
• 一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN
• JS 高階–原型鏈(一看就懂，但 18 歲以下請繞道) —— CSDN
• 原型繼承 —— 廖雪峰
• JS 原型鏈與繼承別再被問倒了 —— 掘金
• 征服 JavaScript 面試系列：類繼承和原型繼承的區別 —— 掘金

視訊

• JS 高階-07-原型鏈繼承 —— 樂視
• JS 原型物件和原型鏈簡介 —— 騰訊視訊

24. Object.create 和 Object.assign

文章

• Object.create —— MDN
• Object.assign —— MDN
• Object.create vs Object.assign —— 慕課網手記
• JS 中的 Object.assign()、Object.create()、Object.defineProperty() —— CSDN
• es6 中 object.create()和 object.assign() —— 風信子部落格
• Object-Assign-Deep —— github

25. 工廠函式和類

文章

• 類 —— MDN
• 類和例項 —— 廖雪峰
• Javascript 定義類（class）的三種方法 —— 阮一峰
• 【譯】ES6 的工廠函式 —— 掘金
• JavaScript 建立物件之單例、工廠、建構函式模式 —— 掘金

26. 設計模式

文章

• 設計模式 —— 阮一峰
• JavaScript 設計模式 —— 掘金
• 學用 JavaScript 設計模式 —— 極客學院
• [[面試專題]JS 設計模式 —— SegmentFault](https://segmentfault.com/a/1190000010914032)
• JavaScript Patterns 中譯本 —— github

視訊

• HTML5 課程大綱 2-11JS 設計模式

27. Memoization

文章

• JavaScript Memoization —— 司徒正美
• memoization 提升遞迴效率 —— 部落格園
• 如何提升 JavaScript 的遞迴效率 —— 51CTO
• JavaScript 高階技巧 Memoization —— SegmentFaut

28. 純函式, 函式副作用和狀態變化

文章

• 純函式(Pure Function) —— React.js 小書
• JavaScript Functional Programming：純函式 —— 寧皓網
• js 函式的副作用分析 —— 指令碼之家
• 如何使用純函式式 JavaScript 處理髒副作用 —— 掘金
• 原生 JavaScript 實現 state 狀態管理系統 —— 部落格園
• JavaScript 函數語言程式設計 —— @BuptStEve

29. 耗效能操作和時間複雜度

文章

• 時間複雜度 O(log n) 意味著什麼？ —— 掘金
• 演算法的時間複雜度和空間複雜度 —— 掘金
• 演算法（一）時間複雜度 —— 掘金
• Big O Search Algorithms in JavaScript —— Bradley Braithwaite
• Time Complexity Analysis in JavaScript — Jennifer Bland
  –

30. JavaScript 引擎

文章

• javascript 引擎 —— 百度百科
• V8(JavaScript 引擎) —— 百度百科
• 圖解搞懂 JavaScript 引擎 Event Loop —— 掘金3
• V8 JavaScript 引擎：高效能的 ES2015+ —— justjavac
• 10 分鐘理解 JS 引擎的執行機制 —— SegmentFaut
• V8 javascript 引擎 —— 部落格園

31. 二進位制, 十六進位制, 十進位制, 科學記數法

文章

• 二、八、十、十六進位制轉換(圖解篇) —— 部落格園
• JavaScript 讀寫二進位制資料 —— 掘金

視訊

• 二進位制、十進位制、十六進位制互相轉化很難嗎？ —— 百度視訊

32. 偏函式, 柯里化, Compose 和 Pipe

文章

• Javascript 函數語言程式設計之偏函式 —— CSDN
• JavaScript 專題之偏函式 —— SegmentFault
• 柯里化和偏函式有什麼區別？ —— SegmentFault
• Javascript 偏函式與柯里化 —— CSDN
• 柯里化(curry) —— JS 函數語言程式設計指南
• 程式碼組合(compose) —— JS 函數語言程式設計指南
• 關於 javascript 函數語言程式設計中 compose 的實現 —— SegmentFault
• 實現 compose 的五種思路 —— SegmentFault
• JavaScript 函數語言程式設計之函式組合函式 compose 和 pipe 的實現 —— SegmentFault
• JavaScript 輕量級函數語言程式設計-第 4 章:組合函式 ——掘金
• JavaScript 函數語言程式設計（二） —— @BuptStEve

33. 程式碼整潔之道

文章

• [[譯] JavaScript 程式碼整潔之道 —— 邊城](https://www.zcfy.cc/article/clean-code-javascript-readme-md-at-master-ryanmcdermott-clean-code-javascript-github-2273.html)
• Javascript 程式設計風格 —— 阮一峰
• 重構 – 程式碼整潔之道 —— 掘金
• 讓你的程式碼更簡短，更整潔，更易讀的 ES6 小技巧 —— 掘金
• Web 前端：11 個讓你程式碼整潔的原則 —— 伯樂線上

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家[免費試用]