简单谈谈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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
显示、隐藏密码
2006/07/01 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
浅析python中while循环和for循环
2019/11/19 Python
numpy实现RNN原理实现
2021/03/02 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
实习生自荐信范文
2013/11/13 职场文书
职专应届生求职信
2013/11/16 职场文书
初中校园广播稿
2014/02/02 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
小学见习报告
2014/10/31 职场文书
就业导师推荐信范文
2015/03/27 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android