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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
TypeScript入门-接口
Mar 30 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
python 装饰器的基本使用
2021/01/13 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
三分钟自我介绍演讲稿
2014/08/21 职场文书
现实表现材料范文
2014/12/23 职场文书
世界遗产导游词
2015/02/13 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript