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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
vue src动态加载请求获取图片的方法
Oct 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下对数组进行排序的函数
2010/08/08 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
九种原生js动画效果
2015/11/11 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Python生成器以及应用实例解析
2018/02/08 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
18岁生日感言
2014/01/12 职场文书
给医务人员表扬信
2014/01/12 职场文书
技校个人求职信范文
2014/01/25 职场文书
质检部经理岗位职责
2014/02/19 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
内衣营销方案
2014/03/15 职场文书
食品工程专业求职信
2014/06/15 职场文书
森林防火标语
2014/06/23 职场文书
2014全年工作总结
2014/11/27 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
速龙x4-860k处理器相当于i几
2022/04/20 数码科技