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实现禁止后退的方法
Dec 27 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 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
一个显示天气预报的程序
2006/10/09 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python的时间模块datetime详解
2017/04/17 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python机器学习之决策树分类详解
2017/12/20 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python实现在线翻译
2020/06/18 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
英文留学推荐信范文
2014/01/25 职场文书
小学中秋节活动方案
2014/02/06 职场文书
静心口服夜广告词
2014/03/20 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
大学计划书范文800字
2014/08/14 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
个人创业事迹材料
2014/12/30 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript