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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
javascript简易画板开发
Apr 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
Paypal支付不完全指北
Jun 04 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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在Web开发领域的优势
2006/10/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python中取绝对值简单方法总结
2020/07/24 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
J2EE面试题大全
2016/08/06 面试题
小学网上祭英烈活动总结
2014/07/05 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers