利用原型链实现 JavaScript 数组继承与路径访问

利用原型链实现数组继承

在开发某些库时，经常需要处理树形结构数据，尤其是那些对获取从根节点到叶节点路径有高频需求的场景。例如，整个站点的路由表本质上就是一棵这样的树，其“路径”对应于 URL 中的 path 部分。因此，我曾多次采用一种看似极端的数组继承方式来构建这种结构，下面将分享具体的实现思路。 在 JavaScript 中，数组本质上是 Object 的一种特殊形式，同样支持继承机制。任何两个对象之间都可以建立继承关系，数组也不例外。我们可以让树中的每个节点都成为一个数组实例，且每个节点仅维护其下标最大元素（即当前节点值）的状态。其他元素的值则通过原型链从祖先节点继承而来。这样，我们就能像操作普通数组一样，在叶节点上直接访问从根节点延伸过来的完整路径。以下是一个简易的实现示例：

<script>
// 定义节点类
var TNode = function(value) {
 this.push(value);
};
TNode.prototype = [];
TNode.prototype.constructor = TNode;
TNode.prototype.createChild = function(value) {
 var node = Object.create(this);
 TNode.call(node, value);
 return node;
};

// 使用节点造出一棵简单的树
var root = new TNode('root');
var a = root.createChild('a');
var b = a.createChild('b');

// 将叶节点视为数组，直接得到路径
document.write(b.join('/')); <!-- root/a/b
</script>

适用场景与注意事项

这种用法属于比较“黑魔法”的技巧，如果不深入理解原型继承的原理，阅读起来会有一定难度。因此，如果仅作为底层库的内部实现，这种写法是可以接受的（笔者已多次使用，证实并无明显缺陷）；但如果直接应用于业务代码，可能会因可读性差而受到质疑。尽管这种用法并未违背 JavaScript 语言的核心设计思想。 该用法的一个显著特点是，当祖先节点的值发生更新时，所有子节点会自动同步获取新值。虽然原型链访问本身存在性能开销，但相比在代码层手动遍历整棵树，其效率已经高得多。当然，如果仅仅是为了实现一棵普通的树，且没有这种路径同步的需求，采用传统的实现方式更为稳妥。毕竟，这种方法高度依赖 JavaScript 语言特性，未来若需迁移至其他编程语言，可能会面临较大的重构成本。