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 相关文章推荐
热点新闻滚动特效的js代码
Aug 17 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
vue实现五子棋游戏
May 28 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python实现井字棋游戏
2020/03/30 Python
浅谈Python基础之I/O模型
2017/05/11 Python
windows下python连接oracle数据库
2017/06/07 Python
分享6个隐藏的python功能
2017/12/07 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
专题组织生活会方案
2014/06/15 职场文书
律师函格式范本
2015/05/27 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
mysql如何查询连续记录
2022/05/11 MySQL