简单谈谈javascript代码复用模式


Posted in Javascript onJanuary 28, 2015

代码复用有一个著名的原则,是GoF提出的:优先使用对象组合,而不是类继承。在javascript中,并没有类的概念,所以代码的复用,也并不局限于类式继承。javascript中创建对象的方法很多,有构造函数,可以使用new创建对象,并且可以动态的修改对象。javascript的非类式继承(可称为现代继承模式)复用方法也很多,例如,利用其它对象组合成所需要的对象,对象混入技术,借用和复用所需要的方法。

类式继承模式-默认模式

两个构造函数Parent和Child的例子:

function Parent(name){

this.name = name||"Adam";

}

Parent.prototype.say = {

return this.name;

};

function Child(name){

}

inherit(Child,Parent);

下面是可复用继承函数inherit()的一种实现方法:

function inherit(C,P){

C.prototype = new P();

}

这里原型属性应该指向一个对象,而不是一个函数,因此他必须指向一个由父构造函数所创建的实例,而不是指向构造函数本身。

在这之后,创建Child对象时,会通过原型从Parent实例获得他的功能:

var kid =new Child();

kid.say();//"Adam"

调用继承之后的原型链:

进一步添加kid的属性:

var kid = new Child();

kid.name = "Patrick";

kid.say();//"Patrick"

原型链的变化情况:

可以在自己对象属性里面找到name,就不用再去查找原型链了。

使用上述模式的缺点,其中一个缺点是同时继承了两个对象的属性,即添加到this的属性及原型属性。大多数时候,不需要自身的这些属性。

另外一个缺点,使用inherit()继承不支持将参数传递给子构造函数中,例如:

var s = new Child("Seth");

s.say();//"Adam"

这个结果并不是期望的,虽然子构造函数可以将参数传递到父构造函数中,但是这样每次需要一个子对象时,都必须重新执行这种继承机制,而且效率低下,原因是最终会重新创建父对象。

本文就先到这里了,后续我们将持续更新javascript代码复用模式的其余几种模式。

Javascript 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
JS动态添加Table的TR,TD实现方法
Jan 28 #Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 #Javascript
浅谈javascript的调试
Jan 28 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
继续学习javascript闭包
2015/12/03 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python2.7实现邮件发送功能
2018/12/12 Python
Python高斯消除矩阵
2019/01/02 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python实现感知机模型的示例
2020/09/30 Python
《匆匆》教学反思
2014/02/22 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
出售房屋委托书范本
2014/09/24 职场文书
个人自查自纠材料
2014/10/14 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
贫困证明怎么写
2015/06/16 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏