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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
vue中activated的用法
Jan 03 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue实现分页组件
2020/06/16 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
医院2014国庆节活动策划方案
2014/09/21 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
小学运动会报道稿
2014/10/04 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js