简单谈谈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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
一个符号插入器 中用到的js代码
Sep 04 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JS提交form表单实例分析
Dec 10 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
js与applet相互调用的方法
Jun 22 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python中JWT用户认证的实现
2020/05/18 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
新郎父亲婚宴答谢词
2014/01/11 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
企业法人授权委托书
2014/04/03 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
入股合作协议书
2014/10/12 职场文书
营销计划书
2015/01/17 职场文书
督导岗位职责
2015/02/04 职场文书
学术会议通知范文
2015/04/15 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书