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中的typeof运算符
Nov 30 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
smarty简单入门实例
2014/11/28 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python线程同步的实现代码
2018/10/03 Python
django迁移文件migrations的实现
2020/03/31 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python