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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
vue路由分文件拆分管理详解
Aug 13 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
php error_log 函数的使用
2009/04/13 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
页面中js执行顺序
2009/11/09 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python的移位操作实现详解
2019/08/21 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
如何使用repr调试python程序
2020/02/28 Python
python实现感知机模型的示例
2020/09/30 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
解决方案设计综合面试题
2015/08/31 面试题
小学清明节活动总结
2014/07/04 职场文书
晚会开幕词
2015/01/28 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
Java Spring Lifecycle的使用
2022/05/06 Java/Android