三句话+两个公式终结js原型链问题

之前发文研究了下js的原型链，但总感觉说的不是特别简单明了，每次回头看时，都还要从原理梳理一遍，这次打算详细梳理一遍，归纳出几个简单结论，用来终结原型链问题。经过这次琢磨，我发现要想搞懂js的原型链，只需要搞懂三个属性（后面我会总结成三句话），外加几个特殊公式就OK。

先放结论

结论一：三个重要属性（三句话）

1. constructor属性：指向构造函数
2. prototype属性：原型对象，object类型（Function.prototype除外，后面会讲），不需要记它指向谁，因为它不指向谁，就是个对象（有点绕），总之记住它就是个对象就好，一个对象的原型对象的构造函数就是这个对象本身，下面有代码解释
3. __proto__属性：指向构造函数的原型对象

用代码解释第二句话：

let foo = funtion(){}
foo.prototype.constructor === foo // foo的原型对象的构造函数是foo

结论二：几个特殊公式

Object.prototype.__proto__ === null

Function.constructor === Function

Function.__proto__ === Function.prototype

Function.prototype.__proto__ === Object.prototype

Function.prototype.__proto__.__proto__ === null

图解结论二：

其实整个js原型链都符合结论一，只有结论二中的前两行公式是不符合的。它们两个应该是为了让整个原型链导向null而设计的，其他所有的链都可以通过结论一推导出来。不过在我们平常使用js的原型链时，是没必要往最顶层推导的（即null），所以前两个特殊公式基本用不到，在我们自己的代码中，只需参考结论一就可以推导所有原型链。

推导过程

有一个基准：只有函数对象才有prototype属性，函数对象简单说就是由function声明的函数

首先看一下几个内置的构造函数(String\Number\Boolean\Array\Date\Symbol\Object\Function)的prototype：

可能这样还不够直观，那么看一下这张图：

看出来区别了吧，typeof(Function.prototype)竟然还是function，从这个角度继续探索，也就会得出上述前提公式的第二条Function.constructor === Function，第一条公式可以通过自行比较得出。

至于结论一也不能算做结论，属于基础感念范畴的，通过代码可以验证结论一，如下

let Foo = function(){}

// typeof(Foo.prototype) 应该是对象
typeof(Foo.prototype) // "object"

let f = new Foo()

// f.constructor 应该指向它的构造函数 Foo
f.constructor === Foo // true

// f.__proto__ 应该指向构造函数的原型对象，即 Foo.prototype
f.__proto__ === Foo.prototype // true

总结：至此，js原型链问题就被终结，只要记住结论一和那两个公式，所有原型链都能通过思考梳理出来，而不需要依靠控制台去试错得出。