简单谈谈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 写的一个简单的timer
Jul 30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
实现vuex原理的示例
Oct 21 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js实现微信分享代码
2020/10/11 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
教师工作证明范本
2015/06/12 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python