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 相关文章推荐
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Apache如何部署django项目
2017/05/21 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
普天C++笔试题
2016/03/20 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
动物学专业毕业生求职信
2013/10/11 职场文书
党员教师工作决心书
2014/03/13 职场文书
军训拉歌口号
2014/06/13 职场文书
工会工作先进事迹
2014/08/18 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
总结Pyinstaller打包的高级用法
2021/06/28 Python