JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

 更新时间:2018年12月19日 12:01:23   作者:huansky  
这篇文章主要介绍了JavaScript创建对象方式,结合实例形式总结分析了工厂模式、构造函数模式、原型模式等各种常见的javascript对象创建方式与相关操作注意事项,需要的朋友可以参考下

本文实例总结了JavaScript创建对象方式。分享给大家供大家参考,具体如下:

这里主要是对《JavaScript高级程序设计》第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的。该章主要讲对象的创建与继承。其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的。因此有必要对本章的内容理一理,以后忘了也好过来看一看。

由于文章长度的限制,本文主要讲创建对象。

1 创建对象

1.1 一般方法

使用Object或者采用对象字面量的方法。

var o = {a: 1};
var o2=new Object();
o2.a=1;

缺点:使用同一个接口创建很多对象,会产生大量重复的代码。

1.2工厂模式

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

函数parent能够根据接受的参数来构建一个包含所有必要信息的child对象。可以无限次调用这个函数,都会返回一个包含两个属性和一个方法的对象。

解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

1.3构造函数模式

对于构造函数这个名字,学过java或者c++的同学应该都是知道的,在js里也是差不多的。

用构造函数将上面的例子重写如下:

function Parent(name,age){
  this.name=name;
  this.age=age;
  this.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

对于构造函数,我们需要在调用的时候加关键字 new。要注意的是,构造函数始终是以一个大写字母开头,而非构造函数始终是以一个小写字母开头。

与工厂模式相比,主要有以下几个不同之处:

  • 没有显示地创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。

缺点:使用构造函数的缺点就是每个方法都需要在每个实例上重新创建一遍。

1.4原型模式

我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性与方法。使用原型对象的好处是可以让所有的对象实例共享其包含的属性与方法。

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

缺点:优点就是其缺点,方法属性都可以共享。具体可以看下面这个例子

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.arr=["123","we"];
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
var y = new Parent("Tom1",12);
x.arr.push("x");
y.arr.push("y");
console.log(x.arr);//["123", "we", "x", "y"]
console.log(y.arr);//["123", "we", "x", "y"]

对象x修改自己的属性,竟然会影响到y对象;同理,对y也一样。这个明显就很不合理啊,太可怕了!

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

function Parent(name,age){
  //只把属性留在这里定义,方法放在原型对象中
  this.name=name;
  this.age=age;
}
//第一种方式
Parent.prototype.sayHi=function(){
  console.log("Hi");
};
//第二种方式
//由于采用对象字面量,因此必须修正其constructor属性;
Parent.prototype={
  constructor:Parent,
  sayHi:function(){
    console.log("Hi");
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法则是在原型中定义的。

是目前使用最广泛、认同度最高的一种创建自定义类型的方法。

--------------------------感觉后面几种方法有些变态了--------------------------------

1.6 动态原型模式

function Parent(name,age){
  this.name=name;
  this.age=age;
  if( typeof this.sayHi !="function"){
    Parent.prototype.sayHi=function(){
      console.log("Hi");
    };
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

先检查某个应该存在方法是否有效再来决定是否需要初始化原型。

1.7寄生构造函数模式

当前面几种都不适用的情况下,可以使用寄生构造函数模式。这种函数的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

但是其实就是和工厂模式一模一样,你TM在逗我吗?????

1.8稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数模式类似的模式,但有两点不同:一是新创建对象的实例方法不引用this; 二是不使用new操作调用构造函数。

function Parent(name,age){
  var o=new Object();
   //私有变量或者方法
  var name=name,
    age=age;
  o.sayName=function(){
     //name前面没有this
    console.log(name+" "+age)
  }
  return o;
}
var x = Parent("Tom",12);
x.sayName(); //Tom 12

变量x中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可以访问其数据成员。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript获得input元素value值的方法

    JavaScript获得input元素value值的方法

    在页面中我们最常见的页面元素就是input了,但是我们如何用JavaScript得到网页input中输入的value值呢,其实很简单,方法也不止一种,今天给大家分享两种JavaScript获得input元素value值的方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 原生javascript实现类似vue的数据绑定功能示例【观察者模式】

    原生javascript实现类似vue的数据绑定功能示例【观察者模式】

    这篇文章主要介绍了原生javascript实现类似vue的数据绑定功能,结合实例形式分析了JavaScript基于观察者模式实现类似vue的数据绑定相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
    2012-05-05
  • 移动端如何用下拉刷新的方式实现上拉加载

    移动端如何用下拉刷新的方式实现上拉加载

    这篇文章主要介绍了移动端如何用下拉刷新的方式实现上拉加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • javascript数据类型详解

    javascript数据类型详解

    本文介绍了对javascript数据类型;隐式转换 (+ 和 -,== 和 ===);包装对象等相关知识进行详细介绍,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 深入探究V8引擎的底层原理

    深入探究V8引擎的底层原理

    V8引擎是一款由Google开发的JavaScript引擎,V8引擎采用了众多的优化措施,使得其在性能上得到了极大的提升,能够高效地执行JavaScript代码,本文将和大家一起探讨一下V8引擎底层原理,探究其优异性能之谜
    2023-06-06
  • echarts大屏字体自适应的方法步骤

    echarts大屏字体自适应的方法步骤

    这篇文章主要介绍了echarts大屏字体自适应的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键

    按键测试,支持像 Ctrl+Alt+Shift+T 的组合键...
    2006-10-10
  • JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制是一种异步处理机制,通过维护事件队列和消息队列,实现任务的分发和执行。事件循环机制由主线程和任务队列构成,主线程运行完当前任务后会检查任务队列中是否有待执行的任务,如有则执行,否则等待
    2023-04-04
  • Electron 自定义窗口桌面时钟实现示例详解

    Electron 自定义窗口桌面时钟实现示例详解

    这篇文章主要为大家介绍了Electron 自定义窗口桌面时钟实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论