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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
理解Javascript闭包
Nov 01 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
如何用threejs实现实时多边形折射
May 07 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python简单实现获取当前时间
2016/08/27 Python
python字符串的index和find的区别详解
2020/06/20 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
公益活动邀请函
2014/02/05 职场文书
媒体宣传策划方案
2014/05/25 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党员评议思想汇报
2014/10/08 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript