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 相关文章推荐
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JS实现简易计算器
Feb 14 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实现的功能是显示8条基色色带
2006/10/09 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
外包公司软件测试工程师
2014/11/01 面试题
2015年企业团支部工作总结
2015/05/21 职场文书
追悼会家属答谢词
2015/09/29 职场文书
学生会自荐信
2019/05/16 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技