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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
React实践之Tree组件的使用方法
2017/09/30 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python中os模块详解
2016/10/14 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python gevent协程切换实现详解
2020/09/14 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
公司中秋节活动方案
2014/02/12 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
表扬信格式模板
2015/05/05 职场文书
警示教育观后感
2015/06/17 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python