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 动态添加表格行
Jun 22 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JavaScript设计模式之策略模式实现原理详解
May 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中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python实现批量转换图片为黑白
2020/06/16 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
师德师风自我评价范文
2014/09/11 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android