简单谈谈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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
微信小程序 form组件详解
Oct 25 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
vue循环数组改变点击文字的颜色
Oct 14 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根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
办公室主任竞聘演讲稿
2014/05/15 职场文书
工作经历证明书范文
2014/11/02 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
故意伤害辩护词
2015/05/21 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis