简单谈谈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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
js操作二级联动实现代码
Jul 27 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
vue filters的使用详解
Jun 11 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
原生javascript如何实现共享onload事件
Jul 03 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
PHP中实现图片的锐化
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php获取微信openid方法总结
2019/10/10 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
基于python实现百度翻译功能
2019/05/09 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
国际商务英语专业求职信
2014/07/08 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年教研工作总结
2015/05/23 职场文书