javascript创建对象的几种模式介绍


Posted in Javascript onMay 06, 2016

在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法。

一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不同而已,所以任何函数只要通过new来调用,那它就可以作为构造函数,若不通过new来调用,则与一般函数一样。

谈谈我对这几种模式的理解:

工厂模式:创建一个一般函数,在函数里创建一个Object对象,为这个对象增添属性与方法,同时赋予其值,最后返回对象。无法识别对象类型。

构造函数模式:创建构造函数,使用this来赋值,每当创建一个实例时,方法都被创建一次,而每个方法都执行相同的命令,这就多余了。这个缺点可以通过将方法放到全局环境中,但是,这样就没有封装性了。不过可以通过原型模式解决。

原型模式:每个函数都有一个prototype属性,该属性是一个指针,指向一个对象,该对象包含其函数创建的所有实例共享的属性与方法。

原型对象,构造函数以及实例之间的关系如下图:

    javascript创建对象的几种模式介绍

图解:1:构造函数以及由构造函数创建的实例,它们的prototype属性都指向构造函数的原型对象。

2:构造函数的原型对象具有constructor属性,该属性指向构造函数。

3:构造函数的原型对象所包含的所有属性与方法可以被由构造函数所创建的所有实例共享。

使用对象字面量重写原型对象后,constructor则指向object构造函数,若需要其指向另一构造函数,则需修改原型对象的constructor属性的值,比如:constructor:Person,这样Person的原型对象即使被重写,原型对象的constructor仍指向Person构造函数。

当先创建实例时:若是直接添加属性或方法,实例可以访问。

若是重写原型对象,则构造函数的prototype指向新的原型对象,而之前创建的实例的prototype仍指向最初的原型对象,所以实例访问不到新的原型对象的新属性或和新方法。

原型对象包含的是共享的属性与方法,那么每个实例都拥有这些信息,这样实例之间就没有什么不同了,而且还不可以传参数,这不是我们所想要的。每个实例之间有共同的信息,又有不同的信息,所以我们可以组合使用构造函数模式与原型模式。

构造函数模式与原型模式的组合使用:

                          javascript创建对象的几种模式介绍

态原型模式:将独立的构造函数与其原型对象结合在一起,在构造函数里初始化原型,为其添加方法。

                            javascript创建对象的几种模式介绍

若该方法不存在,则将其添加到原型对象上,只在初始化原型时才执行,而且只执行一次。

寄生构造函数模式:与工厂模式类似,区别为:寄生构造函数模式为构造函数,通过new来创建实例。

稳妥构造函数模式:没有公共的属性,其方法不引用this的对象。创建实例时不使用new。只能通过方法访问属性(即传入的数据)。

以上这篇javascript创建对象的几种模式介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
理解JavaScript原型链
Oct 25 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
前端性能优化及技巧
May 06 #Javascript
jquery自定义插件开发之window的实现过程
May 06 #Javascript
快速使用Bootstrap搭建传送带
May 06 #Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
jQuery侧边栏实现代码
May 06 #Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
jQuery实现下拉框功能实例代码
May 06 #Javascript
You might like
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP类的封装与继承详解
2015/09/29 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php扩展开发入门demo示例
2019/09/23 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python对DICOM图像的读取方法详解
2017/07/17 Python
Python2随机数列生成器简单实例
2017/09/04 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python中tab键是什么意思
2020/06/18 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
经济学博士求职自荐信范文
2013/11/23 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
贷款担保申请书
2014/05/20 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
学生会工作感言
2015/08/07 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
python 安全地删除列表元素的方法
2022/03/16 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL