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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jQuery的学习步骤
Feb 23 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 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
php格式化电话号码的方法
2015/04/24 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python 类的继承实例详解
2017/03/25 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
应急管理培训方案
2014/06/12 职场文书
推普周活动总结
2014/08/28 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫