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 相关文章推荐
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
类之Prototype.js学习
2007/06/13 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
python网络爬虫采集联想词示例
2014/02/11 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
工程质量承诺书
2014/03/27 职场文书
销售员试用期自我评价
2014/09/15 职场文书
党员公开承诺书2015
2015/01/21 职场文书
销售经理岗位职责
2015/01/31 职场文书
老公婚前保证书
2015/02/28 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸