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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
javascript实现日历效果
2019/06/17 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
一文读懂Python 枚举
2020/08/25 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
培训心得体会
2013/12/29 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
施工安全生产承诺书
2014/05/23 职场文书
公司委托书怎么写
2014/08/02 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers