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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javascript object array方法使用详解
Dec 03 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
小程序云开发之用户注册登录
May 18 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
详解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
Apache中php.ini的设置方法
2013/02/28 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
营销计划书范文
2015/01/17 职场文书
数学复习课教学反思
2016/02/18 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android