js语言从架构角度来理解原型和原型链

319 阅读2分钟

爱因斯相对论基于光速是宇宙中最快的的速度,在理解js语言原型架构时也基于两个基本的规则

  1. 对象都是有函数创建的,对象有一个隐藏的属性__proto__指向创建它的函数的prototype原型对象
  2. 函数具有二相性,是函数也是一种对象,每个函数都有prototype属性指向该函数的原型对象,原型对象上有constructor属性指向该函数

进入正题

没图说个jb

'神图'
依据此图可以从头到尾分析下整个js语言原型的基本结构。

第一阶段:万物初始,一切为null

typeof null === Object 没错,null也是对象。

第二阶段:盘古开天,无中生有,万物之母 Object.prototype 降生。

根据规则2:Object.prototype是构造函数的Object的原型对象,那Object.prototype是那个函数创建的?根据规则1,对象都是由函数创建的, Object.prototype.__proto__ === null, 没错,null 孕育了 Object.prototype,这就是无中生有,也是js原型系统中的一个特例。

第三阶段:追本溯源,万物之父

Object.prototype已诞生,但它对应的函数是谁?Object.prototype.constructor = Function Object 既是构造函数Object,构造函数也是一种对象,谁创建了构造函数Object? Object.__proto__ === Function.prototype, Function 构造函数创建了 Object构造函数。到此为止,Object构造函数的原型及Object构造函数的来由已清楚。

接下来就是探寻创造 Object 构造函数的 Fuction构造函数的来源

照样根据基本规则来,Function.prototype.__proto__ === Object.prototype,很熟悉,Fuction构造函数的原型对象是 构造函数Object 创建的,万物之父 Fuction.prototype原型继承了Object.prototype万物之母,那又是谁创建了 Fuction 构造函数呢?Fuction.__proto__ === Function.prototype ,惊呆了!! 自己创建了自己!!不愧为万物之父!!! 这也是js语言的一个特例。

第四阶段:万物萌生,百花齐放

Array/String/Number/Boolean/Math/Date/RegExp 均在此诞生。

以Array为例:

Array.prototype.__proto__ === Object.prototype,数组构造函数的原型继承自万物之母。Array.__proto__ === Function.prototype,数组构造函数本身是有万物之父 Function构造函数 进行创建的。

以此类推可以总结如下:

  1. js内置构造函数(Object除外)的原型均继承自Object.prototype,Object.prototype继承自null
  2. js内置构造函数(Function除外)本身均为Function构造函数创建,Function构造函数自我创建