Javascript中的对象和原型(二)


Posted in Javascript onAugust 12, 2016

在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论。

一 工厂模式

我们知道,要创建一个对象我们可以用如下代码:

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'

用这样的方法创建对象比较简单直观,也是JavaScript种创建对象最基本的方法。但是这样就有一个问题,如果我们需要创建多个对象,那么我就得写很多重复的代码。比如我们想创建另一个对象user1,我们就得重新将上面的代码重新写一遍,这在实际开发过程中是不合适的,这样如果对象过多,代码量将大大增加。

为了解决这样的问题,我们可以使用一种叫做工厂模式的方法,这种方法 就是为了解决实例化对象产生大量重复代码的问题。

function create(name, age) {
var obj = new Object(); 

obj.name = name; 

obj.age = age;

obj.run = function () {


return this.name +' '+ this.age;

};

return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());

 从上面的代码我们可以看出,工厂模式解决了实例化时代码大量重复的问题,但又出现了一个问题,那就是识别问题,我们根本无法弄清楚他们到底是哪个对象的实例。比如

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true

以上代码标明box1是Object对象,但是我们无法知道具体是哪一个对象创建的。

二 构造函数(构造方法)

为了解决上面的问题,我们可以用构造方法去创建对象。构造函数和普通函数的唯一区别,就是调用的方式不同。但是,构造函数同样是函 数。

function User(name, age) { //构造函数模式
this.name = name;

this.age = age;

this.run = function () {


return this.name + ' '+this.age; 
};
}

创建对象的时候用new运算符就可以了:

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);

现在我们就可以检测user1或者user2是不是属于User。

alert(user1 instanceof User);//true 

可见,使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题。

使用构造函数时执行的过程如下:

1.执行 new 构造函数()时,后台执行了 new Object();

2.将构造函数的作用域给新对象。

3.执行构造函数内的代码;

4.后台直接返回新对象。

接下来我们看看构造函数内部的函数问题。如果我们执行以下语句:

alert(user1.run==user2.run);//结果返回的是false

结果返回的是false,这就说明方法其实也是一种引用地址。如果我们同样重复创建了多个对象,那么每个对象中的方法都会在内存中开辟新的空间,这样浪费的空间就比较多。要解决这个问题,我们就需要用到实例属性或者方法的共享,下一篇文章中将继续探讨解决这个问题。

以上所述是小编给大家介绍的Javascript中的对象和原型(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
javascript静态的url如何传递
May 03 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
解析php中const与define的应用区别
2013/06/18 PHP
php中使用sftp教程
2015/03/30 PHP
php创建无限级树型菜单
2015/11/05 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
JS验证身份证有效性示例
2013/10/11 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python简单实现区域生长方式
2020/01/16 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
经管应届生求职信
2013/11/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
认购协议书范本
2014/04/22 职场文书
市场营销计划书范文
2015/01/16 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
nginx配置指令之server_name的具体使用
2022/08/14 Servers