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 事件对象属性小结
Apr 27 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 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
swfupload 多文件上传实现代码
2008/08/27 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python OpenCV获取视频的方法
2018/02/28 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
传播学毕业生求职信
2013/10/11 职场文书
十佳家长事迹材料
2014/08/26 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
Python入门之使用pandas分析excel数据
2021/05/12 Python