在JavaScript中虽说可以用Object的构造函数或者字面量创建单个对象,但是用这些方式来创建多个对象时就有一个明显的缺点,产生了大量的重复代码。为解决这些问题,许多模式就应运而生。

1. 工厂模式

由于在ECMAScript中无法创建类,所以就发明了一种函数,用来封装以特定接口创建对象的细节。

但是以这种方式创建的对象没有解决对象识别问题,即怎样知道一个对象的类型。

  1. function createPerson(name,age,job)
  2. {
  3. var o = new Object();
  4. o.name=name;
  5. o.age=age;
  6. o.job=job;
  7. o.sayHellow=function()
  8. {alert("Hellow"+o.name)};
  9. return o;
  10. }
  11.  
  12. var person1 = createPerson("Jack",34,"Doctor");

2. 构造函数模式

这种方式创建的对象都是属于同一类型的,下面的例子中,所有的对象都是Person类型。

  1. function Person(name,age,job)
  2. {
  3. this.name=name;
  4. this.age=age;
  5. this.job=job;
  6. this.sayName = function()
  7. {
  8. alert("Hello, "+this.name);
  9. }
  10. }
  11.  
  12. var person1 = new Person("Jack",24,"Doctor");
  13. var person2 = new Person("Simon",34,"Teacher");
  14.  
  15. alert(person1 instanceof Object); // true
  16. alert(person1 instanceof Person); // true
  17. alert(person2 instanceof Object); // true
  18. alert(person2 instanceof Person); // true

但是这个模式也有缺点,那就是每个方法都要在每个对象的实例中重新创建一遍。就如上面的例子,person1 和person2的sayName方法其实不是Function的同一个实例,是位于两个不同位置的函数指针。

所以可以改进下:

  1. function Person(name,age,job)
  2. {
  3. this.name=name;
  4. this.age=age;
  5. this.job=job;
  6. this.sayName = sayName;
  7. }
  8. function sayName()
  9. {
  10. alert("Hello, "+this.name);
  11. }
  12.  
  13. var person1 = new Person("Jack",24,"Doctor");
  14. var person2 = new Person("Simon",34,"Teacher");
  15.  
  16. alert(person1 instanceof Object); // true
  17. alert(person1 instanceof Person); // true
  18. alert(person2 instanceof Object); // true
  19. alert(person2 instanceof Person); // true

3. 原型模式

想弄明白这个模式,必须要想理解prototype.

这个模式有个很大的问题,就是所有对象的属性和方法都是共享的,但是我们可能仅仅想让Person类共享这个sayName 方法,大家应该都想到了,可以用构造函数模式+原型模式来解决这个问题。

  1. function Person(){}
  2. Person.prototype.name="Jack";
  3. Person.prototype.age=33;
  4. Person.prototype.job="IT";
  5. Person.prototype.sayName = function(){alert("Hellow"+ this.name);};
  6.  
  7. // 字面量写法
  8. function Person(){}
  9. Person.prototype =
  10. {
  11. name: "Jack",
  12. age: 33,
  13. job: "IT",
  14. sayName=function(){alert("Hellow "+this.name);}
  15. }

4. 组合使用构造函数模式和原型模式

用构造函数定义实例属性,存放不共享的数据,用原型模式定义共享的方法和属性,这样可以尽最大可能减少内存开销。

有点类似于c#类的实例成员和静态成员,但只是像。

这中模式是目前用的最广泛,认可太最高的。

  1. function Person(name,age,job)
  2. {
  3. this.name=name;
  4. this.age=age;
  5. this.job=job;
  6. this.friends=["Toby","Linford"];
  7. }
  8. Person.prototype=
  9. {
  10. constructor: Person,
  11. sayName: function(){alert(this.name);}
  12. }
  13.  
  14. var person1 = new Person("Jack",33,"SDE");
  15. var person2 = new Person("Lucy",25,"Teacher");
  16.  
  17. person1.friends.push("Jim");
  18.  
  19. alert(person1.friends); // Toby,Linford,Jim
  20. alert(person2.friends); // Toby,Linford
  21.  
  22. alert(person1.friends==person2.friends); // false
  23. alert(person1.sayName==person2.sayName); //true

5.动态原型模式

  1. function Person(name,age,job)
  2. {
  3. this.name=name;
  4. this.age=age;
  5. this.job=job;
  6. if(typeof sayName != "function")
  7. {
  8. Person.prototype.sayName=function()
  9. {
  10. alert(this.name);
  11. }
  12. };
  13. }

6. 寄生构造函数模式

其基本思想就是一个函数,该函数的作用仅仅就是封装创建对象的代码,然后再返回新创建的对象。

  1. function createPerson(name,age,job)
  2. {
  3. var o = new Object();
  4. o.name=name;
  5. o.age=age;
  6. o.job=job;
  7. o.sayHellow=function()
  8. {alert("Hellow"+o.name)};
  9. return o;
  10. }
  11.  
  12. var person1 = createPerson("Jack",34,"Doctor");

从上面代码看来和工厂模式是一样的。但是这个模式可以在特殊的情况为对象(特别是内置的对象,如Array)添加构造函数。

7.稳妥构造函数模式

和寄生构造函数模式类似,但有两个不同点,一是创建对象的实例方法不引用this,二是不使用new 调用构造函数。

  1. function Person(name, age, job)
  2. {
  3. //定义要返回的对象
  4. var o = new Object();
  5. //定义私有变量和方法
  6.  
  7. //添加方法
  8. o.sayName=function(){alert(name);};
  9.  
  10. return o;
  11. }

在上面的例子中,只有通过sayName才可以访问name.

JavaScript 创建对象的几种模式的更多相关文章

  1. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  2. javascript创建对象的几种模式

    在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法. 一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不 ...

  3. JavaScript中创建对象的三种模式

    JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...

  4. JavaScript 创建对象的七种方式

    转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...

  5. JavaScript创建对象的几种 方式

    //JavaScript创建对象的七种方式 //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9 ...

  6. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  7. Javascript 创建对象的三种方法及比较【转载+整理】

    https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...

  8. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  9. javascript创建对象的方法--构造函数模式

    javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...

随机推荐

  1. 用IJ和gradle启动elasticsearch5.4.3

    环境准备 jdk gradle3.3+ idea git 从git clone源码 git checkout v5.4.3 打开项目 1. 在edit configurations添加new conf ...

  2. firefox中outlook.com页面卡顿的原因

    在火狐中使用outlook.com时,鼠标点击动作后,页面会卡顿一段时间,每次点击都是如此. 因为之前火狐出现由于硬件加速导致页面卡顿的情况,因此第一反应就是关闭硬件加速. 果然,关闭硬件加速后,页面 ...

  3. 虚拟机Visualbox安装Ubuntu Server

    关于虚拟机的新建及设置,请查看<Visualbox安装Ubuntu网络设置> 从光盘启动系统中,首先是选择语言,我这里选择英文 选择英文安装Ubuntu服务器 继续选择英文 选择地理位置, ...

  4. HDU 2537 8球胜负(模拟)

    /*这是一个模拟题,模拟一种台球的进球过程,并且判定胜负. 对于输入的字符串,如果出现R则红方记1分,如果出现Y则黄方记1分. 最后根据哪一方打进黑球和得分情况判定胜负. 程序说明: 这里给出两个C语 ...

  5. Oracle的锁

    Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数 ...

  6. luogu P1325 雷达安装

    题目描述 描述: 假设海岸线是一条无限延伸的直线.它的一侧是陆地,另一侧是海洋.每一座小岛是在海面上的一个点.雷达必须安装在陆地上(包括海岸线),并且每个雷达都有相同的扫描范围d.你的任务是建立尽量少 ...

  7. 【动态规划】UVALive - 4888 - Railroad

    f(i,j)表示从A序列前面取i个,从B序列前面取j个时,能否拼成C序列.转移自行脑补. A train yard is a complex series of railroad tracks for ...

  8. python3开发进阶-Djamgo框架中的JSON和AJAX

    阅读目录 什么是JSON 什么是AJAX AJAX常见的应用情景 jQery实现AJAX AJAX请求如何设置csrf_token AJAX上传文件 补充Django内置的serializers 一. ...

  9. python3 Django框架报错(备忘录)

    这篇博客主要总结的学习Django框架中,遇到的报错如何去解决问题: 1.decimal.InvalidOperation: decimal.InvalidOperation: [<class ...

  10. 焦点改变事件OnFocusChangeListener

    效果图 1.MainActivity.java package com.example.app2; import android.support.v7.app.AppCompatActivity; i ...