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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
js表数据排序 sort table data
Feb 18 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
node.js从数据库获取数据
May 08 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vue实现扫码功能
Jan 17 Javascript
Element Alert警告的具体使用方法
Jul 27 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python和js交互调用的方法
2020/06/23 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python Zmail模块简介与使用示例
2020/12/19 Python
在线服装零售商:SheIn
2016/07/22 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
一篇.NET面试题
2014/09/29 面试题
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python