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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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图片处理之图片背景、画布操作
2014/11/19 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php给图片加文字水印
2015/07/31 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python 爬虫性能相关总结
2020/08/03 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
绩效工资分配方案
2014/01/18 职场文书
暑假家长评语大全
2014/04/17 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
离职证明格式样本
2015/06/12 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技