深入理解JavaScript——开篇

一生的知识积累，自学的起码占 90%

我们站在五年工作的基础上，脑子里能想到哪些与 JavaScript 相关的关键字

类型、对象、函数、原型、原型链、继承、词法作用域、作用域链、执行上下文、执行上下文栈、this、闭包、垃圾回收、事件循环...

这些知识点之间有什么联系呢？笔者认为：

每一个知识点之间互相是有关联的，就像一座座城市，城市有城市群，大的城市群就是一个大的知识点，每个小的知识点之间也是有联系的

如果把前端知识点类比中国地图上的城市省份， JavaScript 基础就是”长三角地区“，这是中国最重要的地方之一，也是一名高级前端必备的知识点

笔者会写一个系列，从 JavaScript 是什么，到 JavaScript 由什么组成，解释语言的构成，引出数据类型。JavaScript 的数据类型由基本类型和引用类型构成，从两者的差异到如何辨别两者，引出四种辨别方法：typeof（操作符）、instanceof（运算符）、constructor（构造方法）、Object.prototype.toString.call(source) （原型方法），总结它们的优缺点，最后手写一个判断数据类型的方法——isType

有句话说：在 JavaScript 中，一切皆对象。理解了对象，就理解了 JavaScript。所以我们会以一切皆对象为话题验证此观点是否正确

在对对象有所了解后，我们知道了 JavaScript 中的「对象」具有多种涵义，它既包括了 Object、Function、Array 等内置对象，也包括宿主对象，自定义对象

既然如此，我们就从内置构造函数 Object 讲起，从属性讲到方法，再从创建对象到拷贝对象。其中创建对象方法中的 new 、Object.create 单开一文进行阐述，拷贝对象也非一两句能说明白，所以亦会写篇文章介绍

而从 JavaScript 中的绝大多数“元素”是对象（除了null、undefined之外）为契机，思考这是为什么。原因是 JavaScript 是基于原型继承的语言，从而了解原型以及继承（我们在 new 中也会提及原型）。在继承一文中，画原型链关系图时，对 Function.__proto__ === Function.prototype 此关系感到疑惑，并对原型链的源头是谁感到好奇，到底是谁在继承的源头，所以就有了JavaScript 中的始皇一文

对原型和继承有所了解后，会对它的应用感到好奇，这里以 instanceof 为例子，会写一篇instanceof——找祖籍

如此，我们讲完了 Object，接着讲 Function，说说为什么函数是一等公民，和 Object 一样，我们从属性讲到方法，并介绍了创建函数、调用函数的使用。有了这些基础后，再介绍为什么函数是一等公民。它身为一等公民不仅是因为它是对象（能赋值给变量），更因为它有函数特有的”天赋“，函数可以作为别的函数的参数、函数有返回值。除此之外，它还有函数作用域、this、立即执行函数、arguments 等函数独有的特性

如此，我们就挨个讲解这些特性，讲到 this 时，我们会就它的用法“谁调用我，我指向谁”，衍生到 Function 原型上的三个原型方法：call/apply/bind，它们是如何实现的，又如何手写，我们单独写一篇——call、apply、bind 三大将

至于 this 为什么是动态的，而不是像作用域那样，根据所写的位置而定下的呢，要想了解此现象，就需要了解执行上下文与调用栈，而在讲执行上下文前，需要再了解一个概念——词法环境

也就是说当我们知道了词法环境、执行上下文后，才能解释清楚 this 的经典名言，我们甚至可以对比下作用域与执行上下文。说了这么多，知道了诸多概念后，我们就可以去介绍闭包了，而由闭包衍生出来的应用，如防抖与节流、函数式编程，以及它造成的影响——垃圾回收机制又是一个个好问题，会单独列出来讲解

如此，就讲完了 Object 和 Function，再讲Array、String，其余的内置构造函数则无需细讲。在讲 Array 时，有个话题不得不提到，那就是循环，各种循环的使用和差异是怎么样的，我们单独写一篇：循环都来这儿

总的来说，笔者希望能一环扣一环，因为有这些那样的问题，所以才有相应的解决之道。就像如果要理解闭包，就必须要知道作用域和执行上下文，而执行上下文则是由 this 引出，而介绍它（执行上下文）又要先引出词法环境和执行代码阶段的知识点

对比一下 Function 能引出的知识点是最多的，其次是 Object，而 Array、String 能有一些常见的方法出来就不错了，你看，知识的非均衡性体现的淋漓尽致

笔者始终认为，要明白一个知识点，应该从想知道它是什么，能做什么开始，然后再去了解它的背景知识等，而不是先去了解它的背景知识，然后再告诉你它能做什么。因为我们是从需求出发，要先会做，再去了解原理

笔者心得

刚毕业那一年面试，害怕被人问：原型、原型链、闭包、执行上下文、继承...过了一年，开始问 ES6 各类问题、React/Vue，再后来，开始问手写防抖节流、深拷贝、webpack 的打包原理等，现在前端开始面算法。总之，总有人比你懂的多，总有问题会把你问住，而我们要做的，就是把基础打好

接下来，笔者会在每周二、四更新，争取把这一系列文章写好

系列文章

• 深入理解JavaScript——开篇
• 深入理解JavaScript——JavaScript 是什么
• 深入理解JavaScript——JavaScript 由什么组成
• 深入理解JavaScript——一切皆对象
• 深入理解JavaScript——Object（对象）
• 深入理解JavaScript——new 做了什么
• 深入理解JavaScript——Object.create
• 深入理解JavaScript——拷贝的秘密
• 深入理解JavaScript——原型
• 深入理解JavaScript——继承
• 深入理解JavaScript——JavaScript 中的始皇
• 深入理解JavaScript——instanceof——找祖籍
• 深入理解JavaScript——Function
• 深入理解JavaScript——作用域
• 深入理解JavaScript——this关键字
• 深入理解JavaScript——call、apply、bind三大将
• 深入理解JavaScript——立即执行函数（IIFE）
• 深入理解JavaScript——词法环境
• 深入理解JavaScript——执行上下文与调用栈
• 深入理解JavaScript——作用域 VS 执行上下文
• 深入理解JavaScript——闭包
• 深入理解JavaScript——防抖与节流
• 深入理解JavaScript——函数式编程
• 深入理解JavaScript——垃圾回收机制
• 深入理解JavaScript——数组
• 深入理解JavaScript——循环都来这儿
• 深入理解JavaScript——字符串