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 数值型和字符串型之间的转换
Jul 25 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
如何让vue长列表快速加载
Mar 29 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
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
什么是JavaScript
2009/08/13 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python安装后的目录在哪里
2020/06/21 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
linux面试题参考答案(1)
2016/01/22 面试题
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
学生实习证明范文
2014/09/28 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
解除租赁合同协议书
2016/03/21 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS