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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
解决layui动态添加的元素click等事件触发不了的问题
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
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Python ZipFile模块详解
2013/11/01 Python
python实现清屏的方法
2015/04/30 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python内打印变量之%和f的实例
2020/02/19 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
css3隔行变换色实现示例
2014/02/19 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
安全生产月标语
2014/10/07 职场文书
中学生自我评价2015
2015/03/03 职场文书
小型婚礼主持词
2015/06/30 职场文书
Python Parser的用法
2021/05/12 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers