绘制原型链

Question

是否有一种可视化绘制JavaScript原型链的方法？

基本上，我希望看到一个继承树，这样我就可以更好地了解一个大型项目是如何工作的。

Answer 1

您可以编写一个简单的函数并发送给它任何对象来查看它的原型链：

function printPrototypeChain(o,order)
{
    /*
       order is an optional parameter, you can send it "PtoC" to print the prototype chain in the Parent to Child order. The default order is Child to Parent.
    */
    var a = [];
    var t = o;
    while(t)
    {
       a.push(t);
       t = Object.getPrototypeOf(t);
    }
    if(order==="PtoC")
    {
       a.reverse();
    }
    for(var i =0; i<a.length; i++)
    {
       console.log(a[i]);
    }
}

var o = { y: 3};

function f(x)
{
  this.x = x;
}

var F = new f(2);

printPrototypeChain(F);

--------------------------------OUTPUT-----------------------------
f {x: 2, y: 3} 
Object {y: 3} 
Object {} 
--------------------------END OF OUTPUT---------------------------- 

printPrototypeChain(F,"PtoC");

--------------------------------OUTPUT-----------------------------
Object {} 
Object {y: 3} 
f {x: 2, y: 3} 
--------------------------END OF OUTPUT----------------------------