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解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
详解React 条件渲染
Jul 08 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php获取参数的几种方法总结
2014/02/18 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
js静态作用域的功能。
2006/12/25 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python变量和数据类型详解
2017/02/15 Python
python中的字典操作及字典函数
2018/01/03 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python绘制雷达图实例讲解
2021/01/03 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
出生公证书样本
2014/04/04 职场文书
给孩子的新年寄语
2014/04/08 职场文书
节能环保口号
2014/06/12 职场文书
公司活动总结怎么写
2014/06/25 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js