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模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue实现手机端省市区区域选择
Sep 27 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
在vue中使用防抖函数组件操作
Jul 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
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php生成圆角图片的方法
2015/04/07 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
python原始套接字编程示例分享
2014/02/21 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
DTD的含义以及作用
2014/01/26 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
保险经纪人求职信
2014/03/11 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
创卫工作总结2015
2015/04/22 职场文书
小学六年级毕业感言
2015/07/30 职场文书
如何拟写通知正文?
2019/04/02 职场文书