JavaScript开发者应懂的33个概念
## 简介
这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。
> 本篇文章是参照 @leonardomso 创立，英文版项目地址在[这里](https://github.com/leonardomso/33-js-concepts)。
> 由于原版资源都要翻墙，所以本人创立一个中文版，附上关于这些概念在国内的一些文章和视频。
> 若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。
## 更新
若有觉得更好的文章或者视频，可以贡献出来，觉得有误的，请联系我删除。
- 文章的排序优化，前面的文章是介绍概念，后面的文章是深入解读。
- 将原文的 "高阶函数" 和 "map, reduce, filter" 合并为 "map, reduce, filter 等高阶函数"
- 增加 "promise" 概念(替换删除的 "高阶函数")
- 2018-10-24 更新：@BuptStEve 贡献的三篇关于" 函数式编程 "方面的文章
- 2018-12-04 更新：@haner199401 贡献的 @冴羽 "JavaScript 深入之从原型到原型链"
---
## 目录
1. **[调用堆栈](#1-调用堆栈)**
2. **[原始类型](#2-原始类型)**
3. **[值类型和引用类型](#3-值类型和引用类型)**
4. **[隐式, 显式, 名义和鸭子类型](#4-隐式-显式-名义和鸭子类型)**
5. **[== 与 ===, typeof 与 instanceof](#5--vs--typeof-vs-instanceof)**
6. **[this, call, apply 和 bind](#6-this-call-apply-和-bind)**
7. **[函数作用域, 块级作用域和词法作用域](#7-函数作用域-块级作用域和词法作用域)**
8. **[闭包](#8-闭包)**
9. **[map, reduce, filter 等高阶函数](#9-map-reduce-filter-等高阶函数)**
10. **[表达式和语句](#10-表达式和语句)**
11. **[变量提升](#11-变量提升)**
12. **[Promise](#12-promise)**
13. **[立即执行函数, 模块化, 命名空间](#13-立即执行函数-模块化-命名空间)**
14. **[递归](#14-递归)**
15. **[算法](#15-算法)**
16. **[数据结构](#16-数据结构)**
17. **[消息队列和事件循环](#17-消息队列和事件循环)**
18. **[setTimeout, setInterval 和 requestAnimationFrame](#18-settimeout-setinterval-和-requestanimationframe)**
19. **[继承, 多态和代码复用](#19-继承-多态和代码复用)**
20. **[按位操作符, 类数组对象和类型化数组](#20-按位操作符-类数组对象和类型化数组)**
21. **[DOM 树和渲染过程](#21-dom-树和渲染过程)**
22. **[new 与构造函数, instanceof 与实例](#22-new-与构造函数-instanceof-与实例)**
23. **[原型继承与原型链](#23-原型继承与原型链)**
24. **[Object.create 和 Object.assign](#24-objectcreate-和-objectassign)**
25. **[工厂函数和类](#25-工厂函数和类)**
26. **[设计模式](#26-设计模式)**
27. **[Memoization](#27-memoization)**
28. **[纯函数, 函数副作用和状态变化](#28-纯函数-函数副作用和状态变化)**
29. **[耗性能操作和时间复杂度](#29-耗性能操作和时间复杂度)**
30. **[JavaScript 引擎](#30-javascript-引擎)**
31. **[二进制, 十进制, 十六进制, 科学记数法](#31-二进制-十六进制-十进制-科学记数法)**
32. **[偏函数, 柯里化, Compose 和 Pipe](#32-偏函数-柯里化-compose-和-pipe)**
33. **[代码整洁之道](#33-代码整洁之道)**
---
## 1. 调用堆栈
### 文章
- :book: [Call Stack — MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack)
- :book: [[译] JavaScript 如何工作：对引擎、运行时、调用堆栈的概述 —— 掘金](https://juejin.im/post/5a05b4576fb9a04519690d42)
- :book: [[译] 理解 JavaScript 中的执行上下文和执行栈 —— 掘金](https://juejin.im/post/5ba32171f265da0ab719a6d7)
- :book: [这一次，彻底弄懂 JavaScript 执行机制 —— 掘金](https://juejin.im/post/59e85eebf265da430d571f89)
- :book: [解读 JavaScript 之引擎、运行时和堆栈调用 —— 开源中国](https://www.oschina.net/translate/how-does-javascript-actually-work-part-1)
- :book: [Tasks, microtasks, queues and schedules —— Jake Archibald](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)
- :book: [Tasks, microtasks, queues and schedules（译） —— 掘金](https://juejin.im/entry/55dbd51a60b2f3a92a8f5bff)
### 视频
- :tv: [What is the event loop anyway? —— 腾讯视频(英文字幕)](https://v.qq.com/x/page/h0372bld8re.html?ptag=qqbrowser)
- :tv: [Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili](https://www.bilibili.com/video/av33824933/)
- :tv: [JS 中的变量提升、堆栈内存及闭包详解 —— Acfun](http://www.acfun.cn/v/ac4495641)
- :tv: [事件循环模型 —— PHP 中文网](http://www.php.cn/code/21194.html)
- :tv: [Javascript: the Call Stack explained — Coding Blocks India](https://www.youtube.com/watch?v=w6QGEiQceOM)
- :tv: [The JS Call Stack Explained In 9 Minutes — Colt Steele](https://www.youtube.com/watch?v=W8AeMrVtFLY)
- :tv: [JavaScript Execution Stack — Codecademy](https://www.youtube.com/watch?v=jT0USJeNFEA)
- :tv: [What is the Call Stack? — Eric Traub](https://www.youtube.com/watch?v=w7QWQlkLY_s)
- :tv: [The Call Stack — Kevin Drumm](https://www.youtube.com/watch?v=Q2sFmqvpBe0)
- :tv: [Understanding JavaScript Execution — Codesmith](https://www.youtube.com/watch?v=Z6a1cLyq7Ac&list=PLWrQZnG8l0E4kd1T_nyuVoxQUaYEWFgcD)
- :tv: [Call Stack & Event Loop — movies com](https://www.youtube.com/watch?v=mk0lu9MKBto)
**[:arrow_up: 返回目录](#目录)**
---
## 2. 原始类型
### 文章
- :book: [原始数据 —— MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive)
- :book: [[译]JavaScript 是怎样编码数字的 —— SegmentFault](https://segmentfault.com/a/1190000017090272)
- :book: [每一个 JavaScript 开发者应该了解的浮点知识 —— 颜海镜](https://yanhaijing.com/javascript/2014/03/14/what-every-javascript-developer-should-know-about-floating-points/)
- :book: [JavaScript 标准参考教程(基本语法之数值) —— 阮一峰](https://wangdoc.com/javascript/types/number.html)
- :book: [The Secret Life of JavaScript Primitives —— Angus Croll](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)
### 视频
- :tv: [javascript 六种数据类型 —— 慕课网](https://www.imooc.com/video/5674)
- :tv: [javascript 视频教程(数据类型) —— PHP 中文网](http://www.php.cn/code/5808.html)
- :tv: [JavaScript Reference vs Primitive Types — Academind](https://www.youtube.com/watch?v=9ooYYRLdg_g)
- :tv: [JavaScript Primitive Types — Simon Sez IT](https://www.youtube.com/watch?v=HsbWQsSCE5Y)
- :tv: [Javascript Primitive and Reference Types — Baljeet Singh](https://www.youtube.com/watch?v=F7YbhKbpFic)
- :tv: [Value Types and Reference Types in JavaScript — Programming with Mosh](https://www.youtube.com/watch?v=e-_mDyqm2oU)
- :tv: [JavaScript Primitive Data Types — Avelx](https://www.youtube.com/watch?v=qw3j0A3DIzQ)
- :tv: [Everything you never wanted to know about JavaScript numbers — Bartek Szopka](https://www.youtube.com/watch?v=MqHDDtVYJRI)
**[:arrow_up: 返回目录](#目录)**
---
## 3. 值类型和引用类型
### 文章
- :book: [ECMAScript 引用类型 —— W3school](http://www.w3school.com.cn/js/pro_js_referencetypes.asp)
- :book: [js 中的值类型和引用类型的区别 —— 博客园](https://www.cnblogs.com/leiting/p/8081413.html)
- :book: [JavaScript 的值传递和引用传递 —— FunDebug](https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/)
- :book: [Primitive Types & Reference Types in JavaScript —— Bran van der Meer](https://docstore.mik.ua/orelly/webprog/jscript/ch04_04.htm)
- :book: [JavaScript: Passing by Value or by Reference —— CSDN](https://blog.csdn.net/xiaojia_boke/article/details/54906509)
- :book: [js 值引用和值复制 —— SegmentFault](https://segmentfault.com/a/1190000015411195)
- :book: [js- 引用和复制(传值和传址) —— CSDN](https://blog.csdn.net/zzzaquarius/article/details/4902235)
### 视频
- :tv: [Javascript Pass by Value vs Pass by Reference — techsith](https://www.youtube.com/watch?v=E-dAnFdq8k8)
- :tv: [JavaScript Value vs Reference Types — Programming with Mosh](https://www.youtube.com/watch?v=fD0t_DKREbE)
**[:arrow_up: 返回目录](#目录)**
---
## 4. 隐式, 显式, 名义和鸭子类型
### 文章
- :book: [ECMAScript 类型转换 —— W3school](http://www.w3school.com.cn/js/pro_js_typeconversion.asp)
- :book: [JavaScript 的怪癖 1：隐式类型转换 —— justjavac](http://justjavac.com/javascript/2013/04/08/javascript-quirk-1-implicit-conversion-of-values.html)
- :book: [JavaScript 运算符规则与隐式类型转换详解 —— 掘金](https://juejin.im/post/59ad2585f265da246a20e026)
- :book: [聊一聊 JS 中的隐式类型转换 —— SegmentFault](https://segmentfault.com/a/1190000004482388)
- :book: [有趣的 JavaScript 隐式类型转换 —— 博客园](https://www.cnblogs.com/yugege/p/5277883.html)
- :book: [JavaScript 显式类型转换与隐式类型转换 —— CSDN](https://blog.csdn.net/yangjvn/article/details/48284163)
- :book: [你不知道的 JavaScript（中卷）强制类型转换 —— 简书](https://www.jianshu.com/p/777a89b4ed9a)
- :book: [你懂 JavaScript 嗎？#8 強制轉型 —— cythilya](https://ithelp.ithome.com.tw/articles/10201512)
- :book: [动态类型语言和鸭子类型 —— 曾探](http://book.51cto.com/art/201505/475153.htm)
- :book: [Nominal & Structural Typing —— flow](https://flow.org/en/docs/lang/nominal-structural/)
- :book: [What exactly is Type Coercion in Javascript? —— stackoverflow](https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript)
- :book: [You Don't Know JS: Types & Grammar —— github](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/ch4.md)
### 视频
- :tv: [javascript 隐式转换 —— 慕课网](https://www.imooc.com/video/5675)
- :tv: [Javascript 基础加强-类型转换 —— 黑马程序员](http://www.le.com/ptv/vplay/27767009.html)
**[:arrow_up: 返回目录](#目录)**
---
## 5. == vs ===, typeof vs instanceof
### 文章
- :book: [JavaScript 中的相等性判断 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness)
- :book: [js 中 == 和 === 的区别 —— 掘金](https://juejin.im/entry/584918612f301e005716add6)
- :book: [== vs === in Javascript —— CSDN](https://blog.csdn.net/w97531/article/details/82255225)
- :book: [深入理解 javascript 之 typeof 和 instanceof —— CSDN](https://blog.csdn.net/mevicky/article/details/50353881)
- :book: [JavaScript 的 typeof 的用途 —— justjavac](http://justjavac.com/javascript/2012/12/23/what-is-javascripts-typeof-operator-used-for.html)
- :book: [一张图看懂 Function 和 Object 的关系及简述 instanceof 运算符 —— 掘金](https://juejin.im/post/58358606570c35005e4142bd)
- :book: [浅谈 instanceof 和 typeof 的实现原理 —— 掘金](https://juejin.im/post/5b0b9b9051882515773ae714)
- :book: [typeof 和 instanceOf 的区别](https://segmentfault.com/a/1190000000730982)
**[:arrow_up: 返回目录](#目录)**
---
## 6. this, call, apply 和 bind
### 文章
- :book: [Javascript 的 this 用法 —— 阮一峰](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)
- :book: [学会 JS 的 this 这一篇就够了，根本不用记 —— 慕课网](https://www.imooc.com/article/1758)
- :book: [[译] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金](https://juejin.im/post/5b9f176b6fb9a05d3827d03f)
- :book: [this、apply、call、bind —— 掘金](https://juejin.im/post/59bfe84351882531b730bac2)
- :book: [使用 call、apply 和 bind 解决 js 中烦人的 this，事件绑定时的 this 和传参问题 —— 博客园](https://www.cnblogs.com/tingyu-blog/p/6212392.html)
- :book: [call、apply 和 bind 的原生实现 —— github](https://github.com/Abiel1024/blog/issues/16)
### 视频
- :tv: [JavaScript 关于 this 关键字解释 —— 爱奇艺](https://www.iqiyi.com/w_19rr1augsd.html)
- :tv: [JS 关于作用域闭包和 this 的综合面试题 —— 百度视频](http://baidu.iqiyi.com/watch/845335533383874688.html?page=videoMultiNeed)
- :tv: [js 面向对象闭包数组 12.函数中的 this —— 乐视视频](http://www.le.com/ptv/vplay/27478413.html?ch=baidu_s)
- :tv: [1.3.10-this 指向及 this 应用 —— 乐视视频](http://www.le.com/ptv/vplay/24835911.html?ch=baidu_s)
- :tv: [珠峰培训 JavaScript 开发课程：关于 this 关键字、闭包作用域 —— 网易云课堂](https://study.163.com/course/introduction/590005.htm)
**[:arrow_up: 返回目录](#目录)**
---
## 7. 函数作用域, 块级作用域和词法作用域
### 文章
- :book: [变量作用域与解构赋值 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344993159773a464f34e1724700a6d5dd9e235ceb7c000)
- :book: [学习 Javascript 闭包（Closure） —— 阮一峰](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)
- :book: [JavaScript 中词法作用域、闭包与跳出闭包 —— SegmentFault](https://segmentfault.com/a/1190000006671020)
- :book: [JavaScript 深入之词法作用域和动态作用域 —— 掘金](https://juejin.im/entry/58e70077b123db15eb88dc7e)
- :book: [深入理解闭包之前置知识 → 作用域与词法作用域 —— 掘金](https://juejin.im/post/5afb0ae56fb9a07aa2138425)
- :book: [What is lexical scope? —— stackoverflow](https://stackoverflow.com/questions/1047454/what-is-lexical-scope)
- :book: [You Don't Know JS: Scope & Closures —— Kyle Simpson](https://github.com/fishenal/You-Dont-Know-JS/blob/master/scope%20&%20closures/ch2.md)
**[:arrow_up: 返回目录](#目录)**
---
## 8. 闭包
### 文章
- :book: [闭包 —— MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures)
- :book: [ECMAScript 闭包（closure）—— w3school](http://www.w3school.com.cn/js/pro_js_functions_closures.asp)
- :book: [学习 Javascript 闭包（Closure） —— 阮一峰](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)
- :book: [闭包 —— 廖雪峰](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000)
- :book: [一次性搞懂 JavaScript 闭包 —— 简书](https://www.jianshu.com/p/796e903754f1)
- :book: [JavaScript 闭包 —— SegmentFault](https://segmentfault.com/a/1190000006875662)
- :book: [js 匿名自执行函数中闭包的高级使用 —— 掘金](https://juejin.im/entry/5800eb7da22b9d005b36156e)
- :book: [高效使用 JavaScript 闭包 —— 掘金](https://juejin.im/entry/59df405251882551bf7e58c6)
- :book: [深入理解 JavaScript 原型与闭包 —— 王福朋](https://www.cnblogs.com/wangfupeng1988/p/3977924.html)
### 视频
- :tv: [JavaScript 闭包和闭包面试题 —— 爱奇艺](http://