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


Posted in Javascript onDecember 19, 2018

本文实例总结了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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 #Javascript
如何为vue的项目添加单元测试
Dec 19 #Javascript
浅谈Angular7 项目开发总结
Dec 19 #Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 #Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
vue使用Google地图的实现示例代码
Dec 19 #Javascript
You might like
js onclick事件传参讲解
2013/11/06 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
详解Python字符串对象的实现
2015/12/24 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
详解重置Django migration的常见方式
2019/02/15 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
老师的检讨书
2014/02/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
地道战观后感500字
2015/06/04 职场文书
法制工作总结2015
2015/07/23 职场文书
python 实现的截屏工具
2021/05/08 Python