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中的对象化编程
Jan 16 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
学习jQuey中的return false
Dec 18 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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 strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP new static 和 new self详解
2017/02/19 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
js单例模式详解实例
2013/11/21 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python 文件和路径操作函数小结
2009/11/23 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python获取当前日期和时间的方法
2015/04/30 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python中的引用知识点总结
2019/05/20 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
食堂个人先进事迹
2014/01/22 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
夫妻吵架保证书
2015/05/08 职场文书
运动会100米广播稿
2015/08/19 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers