JavaScript中数组继承的简单示例

153 阅读 0 评论 101 点赞

我是靠谱客的博主粗犷黑裤，最近开发中收集的这篇文章主要介绍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 这种语言的核心思想。
　　这个用法的一个特点就是祖先节点的值更新时会自动同步到所有子节点上。虽然原型链访问也存在性能开销，但比起在代码层自己去遍历树已经是快得不能再多了。当然如果没有这样的需求，只是想实现一棵简简单单的数还是使用传统方式比较好。毕竟这太依赖语言了，以后如果要迁移到别的编程语言可能会比较困难。