脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → javascript设计模式

javascript设计模式之工厂模式示例讲解

 更新时间：2014年03月04日 16:06:29   作者：  
这篇文章主要介绍了javascript设计模式中的工厂模式示例讲解,需要的朋友可以参考下

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中 声明时用"var"与不用"var"的区别

    在Javascript中 声明时用"var"与不用"var"的区别

    Javascript声明变量的时候，虽然用var关键字声明和不用关键字声明，很多时候运行并没有问题，但是这两种方式还是有区别的
    2013-04-04
  • js中值类型和引用类型的区别介绍

    js中值类型和引用类型的区别介绍

    这篇文章介绍了js中值类型和引用类型的区别，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 如何让页面在打开时自动刷新一次让图片全部显示

    如何让页面在打开时自动刷新一次让图片全部显示

    我的网页的图片较多，而服务器也不是很好，所以每次打开网页后总有一、两幅图片无法显示，但刷新一遍后又全部可显示了,这种问题相信每个人都遇到过，接下来介绍详细解决方法
    2012-12-12
  • 总结JavaScript三种数据存储方式之间的区别

    总结JavaScript三种数据存储方式之间的区别

    这篇文章主要介绍了JavaScript三种数据存储方式之间的区别,指的分别是sessionStorage和localStorage以及cookie三种浏览器端的数据存储方式,需要的朋友可以参考下
    2016-05-05
  • Javascript入门学习第一篇 js基础

    Javascript入门学习第一篇 js基础

    这是我看了DOM编程艺术，悟透JavaScript，javascript权威指南5做的笔记，我资质不深，不能写出高深的文章， 如果你觉得笔记写得不好，可以不看我以后的。这篇文章就当作浪费你几分钟。
    2008-07-07
  • javascript标签在页面中的位置探讨

    javascript标签在页面中的位置探讨

    在制作网页的过程中需要引用很多的js文件，至于他正确位置好多的朋友就会有疑问了，接下来为大家详细介绍下
    2013-04-04
  • HTML form表单提交方法案例详解

    HTML form表单提交方法案例详解

    这篇文章主要介绍了HTML form表单提交方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • js css后面所带参数含义介绍

    js css后面所带参数含义介绍

    网页链接的js css后面总是带有一些参数，想必大家并不陌生，下面为大家介绍下这些参数的含义，感兴趣的朋友可以参考下
    2013-08-08
  • 现如今最流行的JavaScript代码规范

    现如今最流行的JavaScript代码规范

    流行的虽然不一定是好的，但是从交流的角度来说，按照流行的风格编写代码，可以让你的代码在大多数人看起来更习惯
    2014-03-03
  • JavaScript学习笔记整理_关于表达式和语句

    JavaScript学习笔记整理_关于表达式和语句

    下面小编就为大家带来一篇JavaScript学习笔记整理_关于表达式和语句。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论