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

簡介

這個項目是為了幫助開發(fā)者掌握 JavaScript 概念而創(chuàng)立的。它不是必備，但在未來學習（JavaScript）中，可以作為一篇指南。

本篇文章是參照 @leonardomso 創(chuàng)立，英文版項目地址在這里。 由于原版資源都要翻墻，所以本人創(chuàng)立一個中文版，附上關于這些概念在國內的一些文章和視頻。 若有覺得更好的文章或者視頻，可以貢獻出來，覺得有誤的，請聯系我刪除。

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

• 文章的排序優(yōu)化，前面的文章是介紹概念，后面的文章是深入解讀。
• 將原文的 "高階函數" 和 "map, reduce, filter" 合并為 "map, reduce, filter 等高階函數"
• 增加 "promise" 概念(替換刪除的 "高階函數")

1. 調用堆棧

文章

• Call Stack — MDN
• [譯] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述
• [譯]理解 JavaScript 中的執(zhí)行上下文和執(zhí)行棧
• 這一次，徹底弄懂 JavaScript 執(zhí)行機制
• 解讀 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
• 事件循環(huán)模型 —— PHP 中文網

2. 原始類型

文章

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

視頻

• javascript 六種數據類型
• javascript 視頻教程(數據類型) —— PHP 中文網

3. 值類型和引用類型

文章

• ECMAScript 引用類型 —— W3school
• js 中的值類型和引用類型的區(qū)別
• JavaScript 的值傳遞和引用傳遞
• 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 運算符規(guī)則與隱式類型轉換詳解 —— 掘金
• 聊一聊 JS 中的隱式類型轉換 —— SegmentFault
• 有趣的 JavaScript 隱式類型轉換 —— 博客園
• JavaScript 顯式類型轉換與隱式類型轉換 —— CSDN
• 你不知道的 JavaScript（中卷）強制類型轉換 —— 簡書
• 你懂 JavaScript 嗎？#8 強制轉型 —— cythilya
• 動態(tài)類型語言和鴨子類型 —— 曾探
• 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 中 == 和 === 的區(qū)別 —— 掘金
• == 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 —— 掘金
• 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 開發(fā)課程：關于 this 關鍵字、閉包作用域 —— 網易云課堂

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

文章

• 變量作用域與解構賦值 —— 廖雪峰
• 學習 Javascript 閉包（Closure） —— 阮一峰
• JavaScript 中詞法作用域、閉包與跳出閉包 —— SegmentFault
• JavaScript 深入之詞法作用域和動態(tài)作用域 —— 掘金
• 深入理解閉包之前置知識 → 作用域與詞法作用域 —— 掘金
• 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 匿名自執(zhí)行函數中閉包的高級使用 —— 掘金
• 高效使用 JavaScript 閉包 —— 掘金

視頻

• JavaScript 閉包和閉包面試題 —— 愛奇藝
• js 面向對象閉包數組 11.閉包 —— 樂視
• 白賀翔_函數(閉包) —— 樂視

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

文章

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

10. 表達式和語句

文章

• js 表達式與語句 —— 博客園
• JS 表達式和語句的區(qū)別 —— 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
• 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. 立即執(zhí)行函數, 模塊化, 命名空間

文章

• Javascript 模塊化編程（一）：模塊的寫法 —— 阮一峰
• javascript 模塊化編程-詳解立即執(zhí)行函數表達式 —— 簡書
• Javascript 的匿名函數與自執(zhí)行 —— 掘金
• 前端模塊化——技術選型 —— SegmentFault
• 談談 Js 前端模塊化規(guī)范 —— 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. 消息隊列和事件循環(huán)

文章

• 并發(fā)模型與事件循環(huán) —— MDN
• JavaScript 運行機制詳解：再談 Event Loop —— 阮一峰
• 深入理解 JavaScript 事件循環(huán) —— 博客園
• 深入淺出 Javascript 事件循環(huán)機制 —— 知乎
• JS 事件循環(huán)機制（event loop）之宏任務、微任務 —— SegmentFault
• JavaScript：徹底理解同步、異步和事件循環(huán) —— SegmentFault

18. setTimeout, setInterval 和 requestAnimationFrame

文章

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

視頻

• setTimeout 和 setInterval —— 優(yōu)酷

19. 繼承, 多態(tài)和代碼復用

文章

• JS 面向對象編程之：封裝、繼承、多態(tài) —— 博客園
• Javascript 的繼承與多態(tài) —— 簡書
• js:面向對象編程，帶你認識封裝、繼承和多態(tài) —— 掘金
• JavaScript 中的“多繼承” —— 掘金
• 代碼復用模式 —— github
• 深入理解 JavaScript：代碼復用模式(推薦篇) —— 湯姆大叔
• 深入理解 JavaScript：代碼復用模式(避免篇) —— 湯姆大叔

20. 按位操作符, 類數組對象和類型化數組

文章

• 按位操作符 —— MDN
• 類數組對象 —— MDN
• 類型化數組 —— MDN
• JavaScript ArrayBuffer 淺析 —— 博客園

21. DOM 樹和渲染過程

文章

• 如何創(chuàng)建一個 DOM 樹 —— MDN
• HTML DOM 節(jié)點 —— 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 的區(qū)別 —— 簡書
• JavaScript 并非所有的東西都是對象 —— justjavac
• JavaScript instanceof 運算符深入剖析 —— IBM

視頻

• 改良版的構造函數 —— 樂視

23. 原型繼承與原型鏈

文章

• 繼承與原型鏈 —— MDN
• 構造函數、原型與原型鏈 —— github
• 原型及原型鏈 —— github(1269 Star)
• 理清 javascript 中的面向對象(一) 原型繼承 —— SegmentFault
• JavaScript：繼承和原型鏈(譯) —— justjavac
• 三張圖搞懂 JavaScript 的原型對象與原型鏈 —— 博客園
• 一張圖讓你搞懂 JavaScript 的繼承與原型鏈 —— CSDN
• JS 高級--原型鏈(一看就懂，但 18 歲以下請繞道) —— CSDN
• 原型繼承 —— 廖雪峰
• JS 原型鏈與繼承別再被問倒了 —— 掘金
• 征服 JavaScript 面試系列：類繼承和原型繼承的區(qū)別 —— 掘金

視頻

• 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 創(chuàng)建對象之單例、工廠、構造函數模式 —— 掘金

26. 設計模式

文章

• 設計模式 —— 阮一峰
• JavaScript 設計模式 —— 掘金
• 學用 JavaScript 設計模式 —— 極客學院
• [面試專題]JS 設計模式 —— SegmentFault
• JavaScript Patterns 中譯本 —— github

視頻

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

27. Memoization

文章

• JavaScript Memoization —— 司徒正美
• memoization 提升遞歸效率 —— 博客園
• 如何提升 JavaScript 的遞歸效率 —— 51CTO
• JavaScript 高級技巧 Memoization —— SegmentFaut

28. 純函數, 函數副作用和狀態(tài)變化

文章

• 純函數(Pure Function) —— React.js 小書
• JavaScript Functional Programming：純函數 —— 寧皓網
• js 函數的副作用分析 —— 億速云
• 如何使用純函數式 JavaScript 處理臟副作用 —— 掘金
• 原生 JavaScript 實現 state 狀態(tài)管理系統(tǒng) —— 博客園

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 引擎的執(zhí)行機制 —— SegmentFaut
• V8 javascript 引擎 —— 博客園

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

文章

• 二、八、十、十六進制轉換(圖解篇) —— 博客園
• JavaScript 讀寫二進制數據 —— 掘金

視頻

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

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

文章.

• Javascript 函數式編程之偏函數 —— CSDN
• JavaScript 專題之偏函數 —— SegmentFault
• 柯里化和偏函數有什么區(qū)別？ —— SegmentFault
• Javascript 偏函數與柯里化 —— CSDN
• 柯里化(curry) —— JS 函數式編程指南
• 代碼組合(compose) —— JS 函數式編程指南
• 關于 javascript 函數式編程中 compose 的實現 —— SegmentFault
• 實現 compose 的五種思路 —— SegmentFault
• JavaScript 函數式編程之函數組合函數 compose 和 pipe 的實現 —— SegmentFault
• JavaScript 輕量級函數式編程-第 4 章:組合函數 ——掘金

33. 代碼整潔之道

文章

• [譯] JavaScript 代碼整潔之道 —— 邊城
• Javascript 編程風格 —— 阮一峰
• 重構 - 代碼整潔之道
• 讓你的代碼更簡短，更整潔，更易讀的 ES6 小技巧 
• Web 前端：11 個讓你代碼整潔的原則 —— 伯樂在線