开发者社区> bob1900> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript创建对象(二)——构造函数模式

简介: 在JavaScript创建对象(一)—— 工厂模式中留下了一个问题,就是创建一个对象怎么判断一个对象的类型。换句话说使用下面这种方式: function createPerson(name, age, job){ var o = new Object(); o.
+关注继续查看

在JavaScript创建对象(一)—— 工厂模式中留下了一个问题,就是创建一个对象怎么判断一个对象的类型。换句话说使用下面这种方式:

function createPerson(name, age, job){
var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}

只是函数的名字叫createPerson,其实返回的对象的本质还是一个Object。现在只能你说他是人他就是人,你说他是狗他就是狗,有没有一种方法比如类似下面这样:

var p1 = createPerson('zhangsan', 18, 'JavaScript');
if(p1 == Person){
    alert('p1是人');
}
if(p1 == Dog){
    alert('p1是狗');
}

在程序上有一种判断逻辑可以区分对象的类型呢?答案是有的,这就是本篇文章要讨论的构造函数模式。

现在使用构造函数模式改写上面的工厂模式:

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var p1 = new Person('zhangsan', 18, 'JavaScript');
var p2 = new Person('lisi', 20, 'Java');

我们比较构造函数模式和工厂模式发现构造函数模式有以下不同:

  1. 没有显式的创建对象,如工厂模式 var o = new Object();
  2. 直接将属性和方法赋给了this,而不是o
  3. 没有return语句
  4. 创建对象使用new关键字,而不是直接调用函数

现在我们可以来讨论如何解决判断对象类型的问题了,很简单,可以使用如下代码:

alert(p1.constructor == Person); //true
alert(p2.constructor == Person); //true

同理,判断一个对象是否是狗,也可以这样:

function Dog(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var d1 = new Dog('xiaohei', 2, 'kanjia');
var d2 = new Dog('xiaohua', 3, 'huyuan');
alert(d1.constructor == Dog); //true
alert(d2.constructor == Dog); //true

这样就可以用代码在逻辑上判断一个对象的类型了。

检测对象的类型除了可以使用对象的constructor属性还可以使用instanceof关键字。JavaScript和Java一样,所有对象均继承自Object,使用instanceof可以检测到继承链,但是constructor不行,所以从这个角度来说instanceof更可靠一些,因为一个对象是子类型,当然也是父类型。看下面代码:

alert(p1.constructor == Object); //false
alert(p1.constructor == Person); //true
alert(p1 instanceof Object); //true
alert(p1 instanceof Person); //true

至此构造函数函数不止具有了工厂模式的优点,还解决了工厂模式的缺点,那么构造函数模式有没有缺点呢?当然也是有的。
以上述p1p2为例,这两个对象都具有sayName函数,而且功能也一样。在构造函数中sayName是一个指针,
function(){alert(this.name)}是一个匿名函数,我们知道js中函数也是对象,每次创建对象都要执行构造函数,那么也就会创建一个匿名函数对象,若是创建若干个对象,那么就要创建若干个匿名函数对象,功能都相同,没必要不说,还占用内存。

通过以下代码可以说明p1sayNamep2sayName确实是两个实例。

alert(p1.sayName == p2.sayName); //false

那么我们可以尝试像下面这样解决这个问题,把函数定义到构造函数之外:

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
}
var p1 = new Person('zhangsan', 18, 'JavaScript');
var p2 = new Person('lisi', 20, 'Java');
alert(p1.sayName == p2.sayName); //true

这样虽然解决了多个函数做同一件事的问题,但是又带来了新的问题:定义在全局作用域中的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。比如这里的sayName(),实际上是为Person准备的,但因为是定义在全局作用域所以可以直接调用sayName(),也就是window.sayName(), 那么此时的this.name就是window.name了,违背了定义的初衷。另一个问题是:如果Person上需要定义很多方法,那么就要定义很多个全局函数,若再加上Dog等等其他对象的方法,这些方法全都定义为全局函数,相互揉杂在一起,那么我们自定义的引用类型就丝毫没有封装性可言了。

那么,构造函数模式多个函数做同一件事的问题到底怎么解决呢?请看下一篇——原型模式。

文章参考:《JavaScript高级程序设计》第3版

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js Map对象的用法
给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。
0 0
前端基础知识库-JavaScript对象的深拷贝
在JavaScript数据类型分为基础类型和引用类型,而引用类型又称为对象,可见了解对象是我们真正掌握JavaScript语言的必备技能。本章主要与大家一起去探索JavaScript对象的一些经常被我们忽略的以及难以理解的知识。好了,废话不多说让我们一起进入JavaScript对象的世界吧。
0 0
js判断一个对象是否在一个对象数组中
js判断一个对象是否在一个对象数组中
0 0
Postman 提供的Javascript 对象有哪些?
大家好,我是阿萨。 昨天介绍了Postman的前置操作是干什么的?有同学反馈说对Postman 提供的javascript 对象不熟悉,希望介绍下。今天这一篇文章就专门给大家介绍下。
0 0
原生js实现对象的克隆
原生js实现对象的克隆
0 0
js把对象装成数组对象
js把对象装成数组对象
0 0
简单解析JavaScript中的cookie对象
简单解析JavaScript中的cookie对象 前面说大了BOM的存储对象,现在简单了解一下cookie对象。 Cookie 用于存储 web 页面的用户信息。 大小限制为 4k。 安全性差。 1.创建cookie var aBtns = document.getElementsByTagName("button"); // 创建cookie document.cookie="name=value,name1=value1;expires= ;path=/" document.cookie = "name=小韩,n
0 0
JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: <a href="10模拟详情页面.html#0" target="_blank">张三</a> <a href="10模拟详情页面.html#1" target="_blank">李四</a> <a href="10模拟详情页面.html#2" target="_blank">王五</a> <a href="10模拟详情页面.html#3" target="_b
0 0
简单认识JavaScript的BOM对象
简单认识JavaScript的BOM对象 前面JavaScript中DOM的学习基本已经结束了。今天开始我们学习一下JavaScript中的BOM。 BOM(浏览器对象模型) Browser Object Model 所有有的浏览器都支持window对象, 浏览器的窗口 window对象是js的最高级 / 顶级对象。 所有js的全局对象, 变量, 函数 自动变成window对象的成员 全局变量相当于window对象的属性。 全局函数相当于window对象的方法。 a = 10; console.log(window.a);/
0 0
简单解析JavaScript中的正则表达式对象
简单解析JavaScript中的正则表达式对象 今天这篇篇博客来和大家讲一下JavaScript中的RegExp对象。 正则表达式:RegExp(Regular Expression)对象,简称正则式。时用来描述字符模式的对象,可以对字符串进行检索,匹配,替换等操作。 1.创建正则表达式 // 字面量 // 语法:var reg1=/表达式/修饰符 var reg=/a/igm; // 构造函数 // 语法:var reg2=new RegExp(表达式,修饰符) var reg2=new RegExp("a","igm"); /
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的对象
立即下载
JS零基础入门教程(上册)
立即下载