简单谈谈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中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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.ini中文版(2)
2006/10/09 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
python实现聊天小程序
2018/03/13 Python
python实现音乐下载的统计
2018/06/20 Python
Python字典对象实现原理详解
2019/07/01 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
支部鉴定材料
2014/06/02 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2014年后勤工作总结
2014/11/18 职场文书
商务英语求职信范文
2015/03/19 职场文书
初中军训感言
2015/08/01 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫