一:工厂模式引入前提例子

  先看一个案例

 <script type="text/javascript">
var person= new Object(); //创建一个对象
person.name = "小龙哥"; //给对象添加一个name属性
person.sex = "男"; //给对象添加一个属性 sex
person.sayName = function(){
  alert("大家好我是:"+this.name); // 打印出:大家好我是:小龙哥 这里的this代表调用该方法的对象
}
person.saySex = function(){
  alert("性别"+this.sex); // 打印出:性别男 这里的this代表调用该方法的对象
}
</script>

假象:加入当前有很多的人名,是不是应该像下面这样

 <script type="text/javascript">
var person2= new Object(); //创建一个对象
person2.name = "小龙哥2"; //给对象添加一个name属性
person2.sex = "男"; //给对象添加一个属性 sex
person2.sayName = function(){
  alert("大家好我是:"+this.name); // 打印出:大家好我是:小龙哥2 这里的this代表调用该方法的对象
}
person2.saySex = function(){
  alert("性别"+this.sex); // 打印出:性别男 这里的this代表调用该方法的对象
}
var person= new Object(); //创建一个对象
person3.name = "小龙哥3"; //给对象添加一个name属性
person3.sex = "男"; //给对象添加一个属性 sex
person3.sayName = function(){
  alert("大家好我是:"+this.name); // 打印出:大家好我是:小龙哥3 这里的this代表调用该方法的对象
}
person3.saySex = function(){
  alert("性别"+this.sex); // 打印出:性别男 这里的this代表调用该方法的对象
}
</script>

...    //多的我自己都不想打了

这时候就想,如果有个东西能造出一个对象(人),然后我们直接输入名字就行了...想了半天终于想出个东西---》工厂模式

* 写程序必须想到一件事情--》有重复的代码尽量使用一个函数包装起来,直接调用函数就行了

这时候工厂模式就是用来批量  “造人”  的,哈哈。真能造的话我就在家造人--美女

二:接下来引入工厂模式

 <script type="text/javascript">
function createPreason(name,sex){ //他的怪癖,喜欢参数
   var person= new Object(); //创建一个对象
   person.name = name; //给对象添加一个name属性
   person.sex = sex; //给对象添加一个sex属性
   person.sayName= function(){
    alert("大家好我是:"+this.name); // 打印出:传进来的参数name的真正值 这里的this代表调用该方法的对象
   }
   person.saySex= function(){
    alert("性别:"+this.sex); // 打印出:传进来的参数sex的真正值 这里的this代表调用该方法的对象
   }
return person; //返回对象
} var p1 = createPreason("小龙哥","男"); //调用工厂模式创建对象p1
var p2 = createPreason("小龙女","女"); //调用工厂模式创建对象p2
p1.sayName(); //打印出 大家好我是:小龙哥
p1.saySex(); //打印出 性别:男
p2.sayName(); //打印出 大家好我是:小龙女
p2.saySex(); //打印出 性别:女
</script>

我觉得工厂模式的有几个怪癖:

  1.他喜欢参数(这个应该是他的个人爱好,反正我没有这个爱好)

  2.现在需要造人的时候就可以随你造人了

  3.每个对象都会创建这两个函数--浪费

    验证:每次对象里面的函数是否是同一个  alert(p1.sayName == p2.sayName)   //肯定是 false

 1 <script type="text/javascript">
2 var a = function(){ //每写一个function就会诞生一个函数对象
3 alert(1);
4 }
5
6 var b = function(){ //每写一个function就会诞生一个函数对象
7 alert(2);
8 }
9 //上面简写,下面才是本质
10 var a =new Function("alert(1)");
11 var b =new Function("alert(2)");
12 a();
13 b();
14 </script>

所以:每次通过createPreason()创建对象,对象里面都有2个函数----恩,不说了浪费

该方式是极其简单的模式与写法,要把他弄得很高深,完美(恶心)请看下章

js对象2--工厂模式的由来--杂志的更多相关文章

  1. JS中的工厂模式

    .一个栗子: var BicycleShop = function(){}; BicycleShop.prototype = { sellBicycle : function( model ){ va ...

  2. js面向对象(对象/类/工厂模式/构造函数/公有和原型)

    https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...

  3. JS设计模式--简单工厂模式

    在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...

  4. [JS设计模式]:工厂模式(3)

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...

  5. JS设计模式之工厂模式

    1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为: ...

  6. JS面向对象之工厂模式

    js面向对象 什么是对象 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来 ...

  7. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

  8. js简单的工厂模式

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  9. JS设计模式——7.工厂模式(示例-XHR)

    XHR工厂 基本实现 var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']); var SimpleHandl ...

随机推荐

  1. eclipse中tomcat发布失败(Could not delete May be locked by another process)原因及解决办法

    在eclipse中tomcat发布项目时,偶尔出现了以下情况: publishing to tomcat v7.0 services at localhost has encountered a pr ...

  2. linux挂载文件

    Linux挂载Winodws共享文件夹 mount -t cifs -o username=***,password=*** //192.168.1.48/share /mnt 其中-t表示要挂载的类 ...

  3. android学习笔记二

    ADT(Android Development Tools)安卓开发工具. android项目目录简介 ==> src==>源代码文件 res==>资源文件 AndroidManif ...

  4. foxmail 6.5升级到7.0版本后,旧邮件的导入处理

    随着foxmail 7.0版的火热升级,部分从foxmial 6.5版升级到7.0版的用户可能会出现旧邮件丢失的困扰.这里,foxmail为大家提供的解决方案如下:   打开Foxmail,点击 文件 ...

  5. activiti自定义流程之自定义表单(二):创建表单

    注:环境配置:activiti自定义流程之自定义表单(一):环境配置 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进 ...

  6. mongoVUE对mongodb常用的基础操作

    一.    连接mongodb服务端: 1.         双击mongoVUE,进入如下图所示界面: 2.         点击上图中的“+”,出现如下图,输入要连接的mongodb服务器的ip. ...

  7. 反转(开关问题) POJ 3276

    POJ 3276 题意:n头牛站成线,有朝前有朝后的的,然后每次可以选择大小为k的区间里的牛全部转向,会有一个最小操作m次使得它们全部面朝前方.问:求最小操作m,再此基础上求k. 题解:1.5000头 ...

  8. jplayer中动态添加列表曲目(js提取request中的list数据作为js参数使用)

    jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...

  9. 用radio控制<tr>的隐藏和显示问题

    jsp页面代码 <tr> <th nowrap="nowrap" width="10%" height="50px" st ...

  10. cf111D Petya and Coloring 组合数学,二项式反演

    http://codeforces.com/contest/111/problem/D Little Petya loves counting. He wants to count the numbe ...