摘要： 基礎很重要啊！
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
視頻
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
視頻
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 閉包 —— 掘金
視頻
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 代碼 —— 博客園
視頻
13. 立即執行函數, 模塊化, 命名空間
文章
- Javascript 模塊化編程（一）：模塊的寫法 —— 阮一峯
- javascript 模塊化編程-詳解立即執行函數表達式 —— 簡書
- Javascript 的匿名函數與自執行 —— 掘金
- 前端模塊化——技術選型 —— SegmentFault
- 談談 Js 前端模塊化規範 —— SegmentFault
14. 遞歸
文章
- 求解釋 js 遞歸 —— SegmentFault
- JavaScript 中的遞歸 —— 掘金
- 遞歸（上）－《JavaScript 輕量級函數式編程》 —— 掘金
- 遞歸（下）－《JavaScript 輕量級函數式編程》 —— 掘金
- 尾調用和尾遞歸 —— 掘金
- 幾個經典遞歸問題用 js 實現 —— CSDN
- 遞歸函數的幾個例子 —— CSDN
15. 算法
文章
- 十大經典排序算法總結（JavaScript 描述） —— 掘金
- 在 JavaScript 中學習數據結構與算法 —— 掘金
- JS 中可能用得到的全部的排序算法 —— 掘金
- JS 家的排序算法 —— 簡書
- 前端常見算法的 JS 實現 —— SegmentFault
- 前端面試中的常見的算法問題 ——蒲小花的博客
視頻
16. 數據結構
文章
- 來我們淺談一下 js 的數據結構 —— 簡書
- JavaScript 中的算法與數據結構 —— 簡書
- 學 JS 必看-JavaScript 數據結構深度剖析 —— 大道至簡的博客
- js 中基礎數據結構數組去重問題 —— 掘金
視頻
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
視頻
19. 繼承, 多態和代碼複用
文章
- JS 面向對象編程之：封裝、繼承、多態 —— 博客園
- Javascript 的繼承與多態 —— 簡書
- js:面向對象編程，帶你認識封裝、繼承和多態 —— 掘金
- JavaScript 中的“多繼承” —— 掘金
- 代碼複用模式 —— github
- 深入理解 JavaScript：代碼複用模式(推薦篇) —— 湯姆大叔
- 深入理解 JavaScript：代碼複用模式(避免篇) —— 湯姆大叔
20. 按位操作符, 類數組對象和類型化數組
文章
21. DOM 樹和渲染過程
文章
- 如何創建一個 DOM 樹 —— MDN
- HTML DOM 節點 —— W3school
- DOM 概述 —— 阮一峯
- 《JavaScript 闖關記》之 DOM（上）—— 掘金
- 《JavaScript 闖關記》之 DOM（下）—— 掘金
- 掌握 DOM 操作 —— 掘金
- 操作 DOM —— 廖雪峯
- 原來 CSS 與 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 面試系列：類繼承和原型繼承的區別 —— 掘金
視頻
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
視頻
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. 二進制, 十六進制, 十進制, 科學記數法
文章
視頻
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、金山軟件、百姓網等衆多品牌企業。歡迎大家[免費試用]