简单谈谈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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
node中的cookie的具体使用
Sep 13 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
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
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python生成器generator用法实例分析
2015/06/04 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Django rest framework实现分页的示例
2018/05/24 Python
python 实现A*算法的示例代码
2018/08/13 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
烹饪大赛策划方案
2014/05/26 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
在人间读书笔记
2015/06/30 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
DE1107机评
2022/04/05 无线电