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

目录
相关文章
|
27天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
2月前
|
JavaScript 前端开发
JavaScript中的正则表达式构造函数和正则表达式字面量
JavaScript中的正则表达式构造函数和正则表达式字面量
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
52 0
|
1月前
|
JavaScript 前端开发
探索JavaScript中的构造函数,巩固你的JavaScript基础
探索JavaScript中的构造函数,巩固你的JavaScript基础
|
3月前
|
JavaScript 前端开发
JavaScript 中类和构造函数的区别
JavaScript 中类和构造函数的区别
21 0
|
3月前
|
存储 JSON 前端开发
JavaScript:构造函数&面向对象
JavaScript:构造函数&面向对象
36 2