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

目录
相关文章
|
14天前
|
JavaScript 前端开发 Java
JavaScript 高级2 :构造函数和原型
JavaScript 高级2 :构造函数和原型
44 0
|
2月前
|
JavaScript
JS 构造函数在 new 时做了啥?
JS 构造函数在 new 时做了啥?
23 0
|
2月前
|
JavaScript 前端开发
JavaScript:构造函数
JavaScript:构造函数
82 0
|
5月前
|
JavaScript 前端开发
【JS精粹】原型链继承和构造函数继承的 “毛病”
先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装、继承、多态。
|
5月前
|
前端开发 JavaScript
web前端-JavaScript构造函数创建对象
web前端-JavaScript构造函数创建对象
55 0
|
7月前
|
JavaScript 前端开发
【JavaScript】24_面向对象中的方法和构造函数
# 4、方法 ```html <script> class Person{ name = "孙悟空" // sayHello = function(){ // } // 添加方法的一种方式 sayHello(){ console.log('大家好,我是' + this.name) } // 添加方法(实例方法) 实例方法中this就是当前实例 static test
48 0
|
7月前
|
JavaScript
js基础笔记学习107-构造函数
js基础笔记学习107-构造函数
36 0
js基础笔记学习107-构造函数
|
8月前
|
JavaScript
重温js——构造函数基础
在上面的代码中,我们可以创建多个对象,使用函数的方式来创建的对象。(但是这两个对象是不一样的,每一次都创建一个新的对象)可以方便许多,除了上面的方法外,还有一种构造函数的方式来创建对象。
重温js——构造函数基础
|
8月前
|
JavaScript 前端开发 容器
JavaScript的类和构造函数
JavaScript的类和构造函数 前面一篇博客,我们说到了对象,总结一下就是对象是包含属性和方法的容器。当然说到对象有个问题绕不过,那就是类,当然在es5里边并没有类的概念,但是在这里边有构造函数,可以创建类似于类的函数,说到类我们要知道,类是一种抽象的概念,类似于工厂,模板。然后对象是一具体的一个实例,当然对象可以是类的一个具体实例。接下来接单的说一下“类”和构造函数。 // 对象是指 具体到一个实体 // 类 是抽象的概念 模板 工厂 // 类名一般要大写 // 语法:function 类名(){ // 类的属性和方法(构造
|
8月前
|
JavaScript 前端开发
【JavaScript】面向对象——构造函数(详解)
【JavaScript】面向对象——构造函数(详解)
62 0
相关产品
云迁移中心
推荐文章
更多