JavaScript中数组继承的简单示例


Posted in Javascript onJuly 29, 2015

在写一些库时经常会用到树结构的数据,而且一些树形结构的数据对从根到叶的路径获取需求非常高。比如一个站点的整个路由表就是一棵这样的树,它的「路径」实际上就是 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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 #Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 #Javascript
浅谈Javascript数组的使用
Jul 29 #Javascript
举例讲解Node.js中的Writable对象
Jul 29 #Javascript
浅谈Javascript数组索引
Jul 29 #Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 #Javascript
JavaScript中几种排序算法的简单实现
Jul 29 #Javascript
You might like
简单的PHP图片上传程序
2008/03/27 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Puppeteer使用示例详解
2019/06/20 Python
python 绘制正态曲线的示例
2020/09/24 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
学生周末长期请假条
2014/02/15 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2014离婚协议书范文
2014/09/10 职场文书
乐山大佛导游词
2015/02/02 职场文书
Nginx快速入门教程
2021/03/31 Servers
比较node.js和Deno
2021/04/27 Javascript
Java对文件的读写操作方法
2022/04/29 Java/Android