简单谈谈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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
javascript中的事件代理初探
Mar 08 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
js实现复制粘贴的两种方法
Dec 04 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数据流应用的一个简单实例
2012/09/14 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
Smarty3配置及入门语法
2017/02/22 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
postman和python mock测试过程图解
2020/02/22 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
selenium自动化测试入门实战
2020/12/21 Python
大学生的网上创业计划书
2013/12/31 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
学生违反校规检讨书
2014/10/28 职场文书
企业百日安全活动总结
2015/05/07 职场文书
学术会议领导致辞
2015/07/29 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL