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版)》

目录
相关文章
|
3月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
43 7
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
25 1
JavaScript基础知识-构造函数(也称为"类")定义
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-使用工厂方法创建对象
本文介绍了JavaScript中使用工厂方法来创建对象的基础知识。
23 0
JavaScript基础知识-使用工厂方法创建对象
|
1月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
37 6
|
2月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
33 6
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
4月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
3月前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
42 0
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript工厂模式:创建对象的简便方式!
JavaScript工厂模式:创建对象的简便方式!