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 自定义个性下拉选择框示例
Aug 20 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
js分页代码分享
Apr 28 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
JavaScript数组方法总结分析
May 06 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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新手入门学习方法
2011/05/08 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Prototype使用指南之array.js
2007/01/10 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
JS前端笔试题分析
2016/12/19 Javascript
js时间控件只显示年月
2017/01/08 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
写给保洁员表扬信
2014/01/08 职场文书
晚宴邀请函范文
2014/01/15 职场文书
九年级英语教学反思
2014/01/31 职场文书
科学发展观演讲稿
2014/09/11 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年工程师工作总结
2014/11/25 职场文书
初中作文评语
2014/12/25 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL