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 Prototype 对象扩展
May 15 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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木马攻击防御之道
2008/03/24 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php备份数据库类分享
2015/04/14 PHP
php实现映射操作实例详解
2019/10/02 PHP
[原创]图片分页查看
2006/08/28 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
layui实现数据分页功能
2019/07/27 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
js实现简单进度条效果
2020/03/25 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python性能优化的20条建议
2014/10/25 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python可视化实现KNN算法
2019/10/16 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
某科技软件测试面试题
2013/05/19 面试题
孝老爱亲模范事迹材料
2014/05/25 职场文书
公司授权委托书范文
2014/09/21 职场文书
行政复议决定书
2015/06/24 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL