如果我们画出前面提到过的所有构造函数、对象、原型对象的全家福，会是个什么样子呢？请看下图：
晕菜了没？欢迎指出错误。把图一画，就发现其实 JavaScript 中的原型链没有那么复杂，有几个内置构造函数就有几个配套的原型对象而已。我这里只画了六个内置构造函数和一个自定义构造函数，还有几个内置构造函数没有画，比如Date()、Math()、Error()、RegExp()，但是这不影响我们理解。写到这里，是不是应该介绍一下我使用的画图工具了？
我使用的画图工具Graphviz在我的 Linux 系列中，有一篇介绍画图工具的文章，不过我这次使用的工具是另辟蹊径的 Graphviz，据说这是一个由贝尔实验室的几个牛人开发和使用的画流程图的工具，它使用一种脚本语言定义图形元素，然后自动进行布局和生成图片。首先，在 Ubuntu 中安装 Graphiz 非常简单，一个命令的事儿：
sudo apt-get install graphviz
然后，创建一个文本文件，我这里把它命名为sample.gv，其内容如下：
digraph GraphvizDemo{ Alone_Node; Node1 -> Node2 -> Node3; }这是一个最简单的图形定义文件了，在 Graphviz 中图形仅仅由三个元素组成，它们分别是：1、Graph，代表整个图形，上面源代码中的digraph GraphvizDemo{}就定义了一个 Graph，我们还可以定义 SubGraph，代表子图形，可以用 SubGraph 将图形中的元素分组；2、Node，代表图形中的一个节点，可以看到 Node 的定义非常简单，上面源码中的Alone_Node;就是定义了一个节点；3、Edge，代表连接 Node 的边，上面源码中的Node1 -> Node2 -> Node3;就是定义了三个节点和两条边，可以先定义节点再定义边，也可以直接在定义边的同时定义节点。然后，调用 Graphviz 中的dot命令，就可以生成图形了：
dot -Tpng sample.gv > sample.png
生成的图形如下：
上面的图形中都是用的默认属性，所以看起来效果不咋地。我们可以为其中的元素定义属性，包括定义节点的形状、边的形状、节点之间的距离、字体的大小和颜色等等。比如下面是一个稍微复杂点的例子：
digraph GraphvizDemo{ nodesep=0.5; ranksep=0.5; node [shape="record",style="filled",color="black",fillcolor="#f4a582",fontname="consolas",fontsize=15]; edge [style="solid",color="#053061"]; root [label="<l>left|<r>right"]; left [label="<l>left|<r>right"]; right [label="<l>left|<r>right"]; leaf1 [label="<l>left|<r>right"]; leaf2 [label="<l>left|<r>right"]; leaf3 [label="<l>left|<r>right"]; leaf4 [label="<l>left|<r>right"]; root:l:s -> left:n; root:r:s -> right:n; left:l:s -> leaf1:n; left:r:s -> leaf2:n; right:l:s -> leaf3:n; right:r:s -> leaf4:n; }在这个例子中，我们使用了nodesep=0.5;和ranksep=0.5设置了 Graph 的全局属性，使用了node [shape=...];和[edge [style=...];这样的语句设置了 Node 和 Edge 的全局属性，并且在每一个 Node 和 Edge 后面分别设置了它们自己的属性。在这些属性中，比较特别的是 Node 的shape属性，我将它设置为record，这样就可以很方便地利用 Node 的label属性来绘制出类似表格的效果了。同时，在定义 Edge 的时候还可以指定箭头的起始点。
执行dot命令，可以得到这样的图形：
是不是漂亮了很多？虽然以上工作使用任何文本编辑器都可以完成，但是为了提高工作效率，我当然要祭出我的神器 Eclipse 了。在 Eclipse 中可以定义外部工具，所以我写一个 shell 脚本，将它定义为一个外部工具，这样，每次编写完图形定义文件，点一下鼠标，就可以自动生成图片了。使用 Eclipse 还可以解决预览的问题，只需要编写一个 html 页面，该页面中只包含生成的图片，就可以利用 Eclipse 自带的 Web 浏览器预览图片了。这样，每次改动图形定义文件后，只需要点一下鼠标生成图片，再点一下鼠标刷新浏览器就可以实时预览图片了。虽然不是所见即所得，但是工作效率已经很高了。请看动画：
Graphviz 中可以设置的属性很多，具体内容可以查看 Graphviz官网 上的文档。