简单谈谈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 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python deque模块简单使用代码实例
2020/03/12 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android