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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 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实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
php生成word并下载代码实例
2019/03/15 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
如何编写jquery插件
2017/03/29 jQuery
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
环境工程专业个人求职信
2013/12/05 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
农村葬礼主持词
2014/03/31 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
迎新晚会策划方案
2014/06/13 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
小学生毕业评语
2014/12/26 职场文书
防暑降温通知书
2015/04/27 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技