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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
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脚本的10个技巧(6)
2006/10/09 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
Stop SQL Server
2007/06/21 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python版本的读写锁操作方法
2016/04/25 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python多线程http压力测试脚本
2019/06/25 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
数控专业推荐信范文
2013/12/02 职场文书
快递业务员岗位职责
2014/01/06 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
民主评议党员个人总结
2015/02/13 职场文书
《夸父追日》教学反思
2016/02/20 职场文书