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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 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输出一个等腰三角形的方法
2015/05/12 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Mac下安装vue
2018/04/11 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
一些.net面试题
2014/10/06 面试题
班主任工作经验材料
2014/02/02 职场文书
社区安全检查制度
2014/02/03 职场文书
买房协议书
2014/04/11 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers