首发于SirM2z的博客
之前发文研究了下js的原型链,但总感觉说的不是特别简单明了,每次回头看时,都还要从原理梳理一遍,这次打算详细梳理一遍,归纳出几个简单结论,用来终结原型链问题。经过这次琢磨,我发现要想搞懂js的原型链,只需要搞懂三个属性(后面我会总结成三句话),外加几个特殊公式就OK。
先放结论
结论一:三个重要属性(三句话)
-
constructor
属性:指向构造函数 -
prototype
属性:原型对象,object
类型(Function.prototype
除外,后面会讲),不需要记它指向谁,因为它不指向谁,就是个对象(有点绕),总之记住它就是个对象就好,一个对象的原型对象的构造函数就是这个对象本身,下面有代码解释 -
__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原型链问题就被终结,只要记住结论一和那两个公式,所有原型链都能通过思考梳理出来,而不需要依靠控制台去试错得出。