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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
前端性能优化及技巧
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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php控制文件下载速度的方法
2015/03/24 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue 自定义右键样式的实例代码
2019/11/06 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
大学生物业管理求职信
2013/10/24 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
社区端午节活动方案
2014/01/28 职场文书
给面试官的感谢信
2014/02/01 职场文书
美术教学感言
2014/02/22 职场文书
元旦晚会主持词
2014/03/24 职场文书
政府法律服务方案
2014/06/14 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
运动会通讯稿600字
2015/07/20 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
css3 文字断裂效果
2022/04/22 HTML / CSS