分享多张自己绘制的 JavaScript 原型图

47 阅读1分钟

svg 图片自取

先来个最经典的

image.png

然后是对象与 Object

image.png

接着是函数与 Function。图中的 [[Prototype]] 指的就是原型对象

image.png

Function 和 Object 之间的关系也不能少。

这两个对象 Object 和 Function 是由 v8 自己创建的,理由是打印这两个对象时,终端输出

	ƒ Object() { [native code] }
        
	ƒ Function() { [native code] }

然后,根据下面关系画出原型图:

Function.prototype === Object.__proto__

Object.__proto__.__proto__ === Object.prototype

image.png

将上面内容结合起来,就是这样的图:

fn.__proto__ === Object.__proto__

fn.__proto__.__proto__ === ({}).__proto__

Object.__proto__.__proto__ === ({}).__proto__

image.png

创建一个函数时,默认会自动为其创建一个原型对象,也就是 prototype 对象

(new Fn()).__proto__ === Fn.prototype

image.png

换个画法:

image.png

最后再送两张福利图

image.png

image.png