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 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
php简单操作mysql数据库的类
2015/04/16 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python3.6的venv模块使用详解
2018/08/01 Python
python 剪切移动文件的实现代码
2018/08/02 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
如何编写python的daemon程序
2021/01/07 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
物理系毕业生自荐信
2013/11/01 职场文书
厨师长岗位职责
2014/03/02 职场文书
什么是就业协议书
2014/04/17 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015公务员年度考核评语
2015/03/25 职场文书