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 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
微信JS接口大全
Aug 25 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
vue.js购物车添加商品组件的方法
Sep 17 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
phpmyadmin的#1251问题
2006/11/25 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
JavaScript多态与封装实例分析
2018/07/27 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python制作花瓣网美女图片爬虫
2015/10/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
HR求职自荐信范文
2014/06/21 职场文书
写给老师的感谢信
2015/01/20 职场文书
大学生入党自荐书
2015/03/05 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript
LeetCode189轮转数组python示例
2022/08/05 Python