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 相关文章推荐
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
JavaScript原型链详解
Nov 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
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php数据访问之查询关键字
2016/05/09 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
python求众数问题实例
2014/09/26 Python
python executemany的使用及注意事项
2017/03/13 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python socket聊天脚本代码实例
2020/01/02 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
Python是如何进行类型转换的
2013/06/09 面试题
信访工作者先进事迹
2014/01/17 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
走进科学观后感
2015/06/18 职场文书
考试后的感想
2015/08/07 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python