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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
基于xcache的配置与使用详解
2013/06/18 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
js简易版购物车功能
2017/06/17 Javascript
详解JavaScript的变量
2019/04/04 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
玩转python爬虫之正则表达式
2016/02/17 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
物流仓管员工作职责
2014/01/06 职场文书
工作表现自我评价
2014/02/08 职场文书
公司任命书模板
2014/06/06 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
二年级作文之动物作文
2019/11/13 职场文书