JavaScript创建对象的四种常用模式实例分析


Posted in Javascript onJanuary 11, 2019

本文实例讲述了JavaScript创建对象的四种常用模式。分享给大家供大家参考,具体如下:

这里介绍了javascript中创建对象常用的几种模式,包括:工厂模式,构造函数模式,原型模式,组合构造函数与原型的模式,动态原型模式。

一.工厂模式

看如下代码:

function getMySon(name,sex){
  var o={};
  o.name=name;
  o.sex=sex;
  o.sayName = function(){
    alert(this.name);
  }
  return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

这就是工厂模式。在函数中定义一个对象,并为其添加属性与方法,最后将这个对象返回。虽然这种模式实现了方便的创建对象,但是有这样一个问题,即不能判断这个实例到底是谁创建的。

比如 son1 intanceof getMySon并不能返回 true。因为这里的实例确切来说并不是由getMySon 通过new来创建的,而是getMySon中的 o。
所以工厂模式并不适合需要创建很多种对象的情况。

那么怎么创建对象才能正确的判断实例是从哪儿来的呢?下面就要说到构造函数模式了。

二.构造函数模式

看如下代码 :

function getMySon(name,sex){
  this.name = name;
  this.sex = sex;
  this.sayName = function(){
    alert(this.name);
  }
}
son1 = new getMySon('li ming','female');

这就是构造函数模式,注意在调用时要用 new。

在进行new调用时,进行如下几个步骤:

1. 创建一个新的对象(并把空对象的__proto__属性设置为getMySon.prototype)。

2. 将构造函数的作用域赋给新对象(此时this 指向了这个新对象)。

3. 执行构造函数中的代码(通过this 为这个新对象添加属性)

4. 返回新对象。

通过这种方式产生的实例可以使用son1 instanceof getMySon来判断实例是由谁来产生的。

那么使用构造函数有什么问题呢?由于每次使用new时都会创建一个新的对象,那么所有的数据在不同实例之间是不共享的。但是对于函数sayName来说,它并没有必要创建多个。这样做浪费了空间。

这样就引出了下一种,原型模式。

三. 原型模式

看如下代码:

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
  alert(this.name);
}

这就是原型模式(原型的相关知识这里不详细说)。

原型模式将属性和方法添加到了getMySon.prototype里,prototype由所有的实例共享,它只有一份,并不是所有的实例各有一份。

这种方式实现了让函数只有一份,不必占用多余的空间。但是,name,sex之类的属性并不需要在所有实例间共享,而且使用原型模式进行传参生成这些属性也不方便。

那么可以合并构造函数模式与原型模式,利用它们各自的优点。让各实例间不需要进行共享且需要通过传参进行生成的属性放在构造函数模式中生成,让各实例中需要共享的(比如方法)在原型模式中生成。

三. 组合构造函数与原型的模式

看如下代码:

function getMySon(name,sex){
  this.name=name;
  this.sex=sex;
}
getMySon.prototype.sayName(){
  alert(this.name);
}
son1=new getMySon('li ming','female');

这是 组合构造函数与原型的模式 。这种方式结合了构造函数模式与原型模式的优点。这是最常用的一种创建对象的模式。

四. 动态原型模式

所谓动态原型模式,其实是对 组合构造函数与原型的模式 的一种封装。
看如下代码:

function getMySon(name,sex){
  this.name = name;
  this.sex = sex;
  //即使有多个需要定义的方法,也只需判断一个方法。
  if(typeof sayName != 'function'){
    getMySon.prototype.sayName=function(){
      alert(this.name);
    }
  }
}
son1=new getMySon('li ming','female');

这里之所以命名为动态原型模式,是因为getMySon在不同的调用中会发生变化,是动态的。只有在第一次调用getMySon时才会执行对sayName函数的定义。
从本质来看,仍然是将不需共享的通过构造函数进行定义,需要共享的方法通过原型进行定义。只是将它们放在了一起,进行了封装。

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

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

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

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
详解Vue项目部署遇到的问题及解决方案
Jan 11 #Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 #Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 #Javascript
微信公众号H5支付接口调用方法
Jan 10 #Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 #Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 #Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 #Javascript
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php 进度条实现代码
2009/03/10 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python AES加密模块用法分析
2017/05/22 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python读写csv文件方法详细总结
2019/07/05 Python
python设置环境变量的作用和实例
2019/07/09 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python安装gdal的两种方法
2019/10/29 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
机械制造专业大学生自我鉴定
2014/09/19 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
学校开除通知书
2015/04/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书