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 字符编码规则
May 04 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
vue 自定义右键样式的实例代码
Nov 06 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的面向对象编程
2006/10/09 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
常用jQuery代码分享
2015/07/14 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
老教师工作总结的自我评价
2013/09/27 职场文书
留学推荐信写作指南
2014/01/25 职场文书
个人委托书怎么写
2014/04/04 职场文书
银行业务授权委托书
2014/10/10 职场文书
辞职信标准格式
2015/02/27 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
时尚女魔头观后感
2015/06/04 职场文书
毕业生学校组织意见
2015/06/04 职场文书