JS原型解析

jiezi

5 年前

JS 中原型是为了实现代码重用的一种仿类机制，不过它跟类又完全不同。它通过给对象添加原型关系（即给某个对象添加__proto__属性）实现一个关联。把共有的方法和属性放到这个关联上即实现了 JS 的继承。简单来说就是一种委托机制。

JS 里面的原型关系真的很复杂也很绕，如果只是很枯燥的讲述各种关系，真的很难记住，在这里希望通过代码和思维导图组合的形式，对 JS 的原型进行一次深度的剖析和理解。

首先，我们给出下面的一组关系代码

function Test() {}

var t1 = new Test()
var t2 = {}
var t3 = new Number(1)

t1.__proto__ === Test.prototype
Test.__proto__ === Function.prototype
Test.prototype.__proto__ === Object.prototype
t2.__proto__ === Object.prototype
Number.__proto__ === Function. prototype
Math.__proto__ === Object.prototype 
t3.__proto__ === Number.prototype
Number.prototype.__proto__=== Object.prototype

下图是根据上述关系绘制的思维导图，方便大家理解。

引擎会创建两个对象 Object.prototype 和 Function.prototype
用__proto__将 Function.prototype 和 Object.prototype 关联
非函数对象可以通过__proto__找到 Object.prototype
函数对象通过__proto__找到 Function.prototype
函数的 prototype 是一个对象，该对象的__proto__指向 Object.prototype

JS原型解析

概述

代码分析

导图理解

总结