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 相关文章推荐
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
js实现坦克大战游戏
Feb 24 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python实现读取命令行参数的方法
2015/05/22 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
strstr()的简单实现
2013/09/26 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
小组组名及励志口号
2015/12/24 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android