JavaScript继承机制与原型链解释

JavaScript对象继承机制与原型链是JavaScript中的基础.本文尝试用简洁的语言与图片进行解释.

如图所示:

JavaScript_Object_Hierarchy

上图中,同一列的表示其在原型链中处于一个级别,左边是右边的原型,以此类推。

说明

1.继承机制是指对象中属性有"自有属性"与"继承属性"之分.当查询属性时若对象"自有属性"中无此属性,则向其原型对象中查询,以此类推,直到最后一个原型对象没有原型对象时结束,当设置属性时,只对原始对象进行操作,不会影响到其原型对象.

2.查询属性时通过原型对象查询并类推,这个类推所遵循的逻辑抽象起来即为原型链.

3.以上图中Array的示例[..]或new Array(..)为例:若调用map方法,因在“自有属性”中查询不到map,则在其原型对象,即Array.prototype上查询,并成功查询.同时,Array.prototype的原型对象为Object.prototype,所以Array.prototype继承Object.prototype上如toString之类的方法,这样Array的实例也就继承了toString方法.

注意

1.对象的constructor属性继承最终继承自Object.prototype,不过中途被重写了.如数组实例的constructor属性为Array,函数实例的constroctor属性为Function.当然,被重写的constructor属性位于构造函数的prototype对象中,这就意味着Array.prototype.constructor===Array,形成反向引用了。坦白说,我相信很多人直觉是因为Array.prototype的原型是Object.prototype,则其constructor应该为Object.

2.如上面一条所说,我们在代码中并不能直接感受到原型链,但好在有isPrototypeOf属性来查询某个对象是否是另一个对象的原型.还有一个__proto__属性(非ECMA标准)用来直接查询对象的原型对象,例如Array.prototype.__proto__===Object.prototype,这就相当直观了.

参考

图片来源于 twitter