简单谈谈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为textarea添加maxlength属性的代码
Apr 07 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
微信小程序自定义组件
Aug 16 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php操作access数据库的方法详解
2017/02/22 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
2014/02/04 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
浅谈python中的数字类型与处理工具
2017/08/02 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python编写打字训练小程序
2019/09/26 Python
Python 爬虫的原理
2020/07/30 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
公司总经理任命书
2014/06/05 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
收款委托书
2014/10/14 职场文书
高二英语教学反思
2016/03/03 职场文书