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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
JS实现多功能计算器
Oct 28 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
php下批量挂马和批量清马代码
2011/02/27 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
详解python配置虚拟环境
2019/04/08 Python
Python flask框架post接口调用示例
2019/07/03 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
基于python3实现倒叙字符串
2020/02/18 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
毕业生自荐信
2013/12/14 职场文书
粗加工管理制度
2014/02/04 职场文书
一月红领巾广播稿
2014/02/11 职场文书
工程建设实施方案
2014/03/14 职场文书
工地标语大全
2014/06/18 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年秘书工作总结
2014/11/25 职场文书
车间安全生产管理制度
2015/08/06 职场文书
小学教代会开幕词
2016/03/04 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Mysql Show Profile
2021/04/05 MySQL
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL