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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
js读取注册表的键值示例
Sep 25 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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变量的方法
2015/06/26 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python itertools模块详解
2015/05/09 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python放大图片和画方格实现算法
2018/03/30 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python 数据类型强制转换的总结
2021/01/25 Python
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
实习评语
2013/12/16 职场文书
开学季活动策划方案
2014/02/28 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
redis实现排行榜功能
2021/05/24 Redis