javascript设计模式之工厂模式示例讲解


Posted in Javascript onMarch 04, 2014

javaScript工厂方式原始的方式

因为对象的属性可以在对象创建后动态定义,这在 JavaScript 最初引入时都会编写类似下面的代码

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

在上面的代码中,创建对象 car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象 car。不过这里有一个问题,就是可能需要创建多个 car 的实例,这显然不是很好的方式。

解决方案:工厂方法
要解决该问题,开发者创造了能创建并返回特定类型的对象的工厂函数。例如,函数 createCar() 可用于封装前面列出的创建 car 对象的操作:

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //输出 "red"
oCar2.showColor();        //输出 "blue"

调用此工厂函数,将创建新对象,并赋予它所有必要的属性,给 createCar() 函数加上参数,即可为要创建的 car 对象的 color、doors 和 mpg 属性赋值。这使两个对象具有相同的属性,却有不同的属性值。该方法有个不好的地方在于每创建一个car对象(即调用一次createCar函数)都会重复的为每个对象创建showColor 方法,而这时没有必要的而事实上,每个对象都共享同一个函数。于是我们尝试在函数之外去声明其方法属性。

在工厂函数外定义对象的方法
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

function showColor() {
  alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();        //输出 "red"
oCar2.showColor();        //输出 "blue"

在上面这段重写的代码中,在函数 createCar() 之前定义了函数 showColor()。在 createCar() 内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。

Javascript 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
js如何获取网页所有图片
May 12 Javascript
vue如何判断dom的class
Apr 26 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 #Javascript
JavaScript的21条基本知识点
Mar 04 #Javascript
js的2种继承方式详解
Mar 04 #Javascript
Seajs的学习笔记
Mar 04 #Javascript
文本域中换行符的替换示例
Mar 04 #Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 #Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 #Javascript
You might like
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
javascript每日必学之封装
2016/02/23 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python线程池的实现实例
2013/11/18 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python生成验证码图片代码分享
2016/01/28 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python文件和文件夹复制函数
2020/02/07 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
金融专业个人的自我评价
2013/10/18 职场文书
小学生成长感言
2014/01/30 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
简单租房协议书
2014/10/21 职场文书
营销与策划实训报告
2014/11/05 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书