javascript原型链

图形化原型链

虽然我们都说原型链,但实际上,在不考虑网页中frame的情况,js引擎在执行期间的某一时刻,所有存在的对象组成的是一棵原型树.默认情况下,只有一棵树.根节点可以说是Object.prototype,也可以说是null.

但我们可以再建立一棵原型树,通过使用Object.create方法

	var foo = Object.create(null);        //foo是一个对象,但它是游离的,不属于已有的那棵原型树
var bar = Object.create(foo);         //bar的原型是foo
var baz = Object.create(foo);         //baz的原型是foo 

这样我们有了第二棵原型树

遍历原型链

我们没有办法遍历到所有以某个对象为原型的对象,但我们可以向上遍历,获取到一个对象所有的上层原型,这个原型链必定是线性的,尽头是null.

	function getPrototypeChain(object) {
    var protoChain = [];
    while (object = object.__proto__) {
        protoChain.push(object);
    }
    protoChain.push(null);
    return protoChain;
}

试验一下,不同的环境实现不同,显示形式也不同.下面是在chrome控制台中的显示.

	>getPrototypeChain(new String(""))
[String, Object, null]                     //依次是String.prototype,Object.prototype,null
  
>getPrototypeChain(function(){})
[function Empty() {}, Object, null]        //依次是Function.prototype,Object.prototype,null

内置类型的对象的原型链并不长,下面试试宿主对象.

	>getPrototypeChain(document.createElement("div"))
[HTMLDivElement, HTMLElement, Element, Node, Object, null]

这个就长多了.

超长原型链

可以看出来,我们平时使用的对象并没有很长的原型链.但可以自己构造一个.

	function Foo() {}

for (var i = 0; i < 100; i++) {
    Foo.prototype["foo" + i] = i;
    Foo.prototype = new Foo;
}
console.dir(getPrototypeChain(new Foo));