JavaScript创建对象(四)——组合使用构造函数和原型模式-阿里云开发者社区

开发者社区> bob1900> 正文

JavaScript创建对象(四)——组合使用构造函数和原型模式

简介: 在JavaScript创建对象(三)——原型模式中,我们阐述了原型模式存在的两个问题:一是没办法通过构造函数初始化对象属性,二是共享引用类型的数据导致数据错乱。
+关注继续查看

在JavaScript创建对象(三)——原型模式中,我们阐述了原型模式存在的两个问题:一是没办法通过构造函数初始化对象属性,二是共享引用类型的数据导致数据错乱。于是我们提出组合使用两种模式,摒弃它们的缺点,保留它们的优点。

为了解决构造函数模式相同功能的函数定义多次的问题,我们提出了原型模式。但是不要忘记,构造函数模式也具备原型模式所缺乏的优点,比如可以通过构造函数初始化对象的属性,同时也没有共享引用类型的数据错乱问题。既然我们提出原型模式是为了解决构造函数模式的函数问题,那为什么我们不只把函数定义在原型中,属性依然保留在构造函数中呢?顺着这个思路,我们来看下面的代码:

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['小明', '小刚'];
}

Person.prototype = {
    constructor: Person,
    sayName: function(){
        console.log(this.name);
    }
}

var p1 = new Person('张三', 18, 'JavaScript');
var p2 = new Person('李四', 20, 'Java');

p1.friends.push('小红');
console.log(p1.friends);//["小明", "小刚", "小红"]
console.log(p2.friends);//["小明", "小刚"]

console.log(p1.friends === p2.friends);//false
console.log(p1.sayName === p2.sayName);//true

还是原来的例子,只不过把一些不需要共享的属性保留在构造函数中,需要共享的属性定义在原型中,这就是组合使用构造函数和原型模式。我们可以看到,首先可以通过构造函数初始化对象属性了。其次,因为属性是定义在构造函数中,每次通过new关键字创建对象都会执行一次构造函数,所以对于每个对象来说就都有了属于自己的属性了。比如这里,p1friends新增了一个小红,p2friends并不会受到影响,因为它们是两个数组。再者,一些需要共享的属性依然定义在原型中,避免了重复定义,可谓是集两种模式之长。

这种构造函数与原型集成的模式,是目前在JavaScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。

本文参考《JavaScript高级程序设计(第3版)》

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

相关文章
[细说Java](3)创建字符串是使用" "还是构造函数?
在Java中,可以使用两种方式创建字符串: String x = "abc"; String y = new String("abc"); 对于这两种方式(双引号,构造函数)它们到底有什么区别呢? 1.
697 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
958 0
JavaScript创建对象(四)——组合使用构造函数和原型模式
在JavaScript创建对象(三)——原型模式中,我们阐述了原型模式存在的两个问题:一是没办法通过构造函数初始化对象属性,二是共享引用类型的数据导致数据错乱。
825 0
使用IntelliJ IDEA 14和Maven创建java web项目
原文:使用IntelliJ IDEA 14和Maven创建java web项目 http://mark.leanote.com/post/%E4%BD%BF%E7%94%A8IntelliJ-IDEA-14%E5%92%8CMaven%E5%88%9B%E5%BB%BAjava-web%E9%A1%B9%E7%9B%AE 安装Maven 下载安装 去maven官网下载最新版。
1283 0
函数计算助力闲鱼构建云端一体化变成模式,节省30%开发成本
闲鱼是依托阿里电商体系的前台型业务,有非常独特的业务特点和用户诉求,在底层依托阿里系统的同时,在表现层和业务层需要探索适合闲鱼的、并且更加快速灵活的研发体系。
1033 0
JavaScript创建对象(二)——构造函数模式
在JavaScript创建对象(一)—— 工厂模式中留下了一个问题,就是创建一个对象怎么判断一个对象的类型。换句话说使用下面这种方式: function createPerson(name, age, job){ var o = new Object(); o.
838 0
+关注
7
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载