“工厂、构造、原型” 设计模式与 JS 继承

简介: “工厂、构造、原型” 设计模式与 JS 继承

序言



我们在前一篇文章《JS精粹,原型链继承和构造函数继承的 “毛病”》 ,提到了:原型链继承、构造函数继承、组合继承;


在另一篇文章《蓦然回首,“工厂、构造、原型”设计模式,正在灯火阑珊处》,提到了:我们用于创建对象的三种设计模式:工厂设计模式、构造设计模式、原型设计模式;


至此,我们可以明显的感受到:JS 要实现面向对象(继承的能力),离不开这 3 种设计模式;


原型链 + 构造函数 = 组合继承


本篇带来一个新的继承方式:寄生继承,它由工厂模式和构造函数模式组成,即

工厂+构造函数 = 寄生继承


正文



正是由于:原型链继承和构造函数继承的 “毛病”


  1. 原型链继承:所有继承的属性和方法都会在对象实例间共享,无法做到实例私有。
  2. 构造函数继承:子类不能访问父类原型上的方法。


组合继承应运而生:


function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
     SuperType.call(this, name) // 构造函数继承 (两次调用父类构造函数)
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承 (一次调用父类构造函数)
SubType.prototype.sayAge = function() {
   console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27


但是呢?这样做,会有效率问题,父类构造函数始终会被调用两次:一次是在子类构造函数中调用,另一次在是创建子类原型时调用。


本质上,子类原型最终是要包含超类对象的所有实例属性,子类构造函数只要在执行时重写自己的原型就行了。


这个时候有一个新的思路!


不通过调用父类构造函数给子类原型赋值,而是取得父类原型的一个副本。使用寄生式继承来继承父 类原型,然后将返回的新对象赋值给子类原型。


核心代码是:通过工厂的方式,增强一个新对象:


function createAnother(original){
     let clone = Object(original); // 通过调用函数创建一个新对象
     clone.sayHi = function() { // 以某种方式增强这个对象
         console.log("hi");
     };
     return clone; // 返回这个对象
}


将组合代码改造一下,完整代码是:


function inheritPrototype(subType, superType) {
     let prototype = Object(superType.prototype); // 创建对象
     prototype.constructor = subType; // 增强对象
     subType.prototype = prototype; // 赋值对象
}
function SuperType(name) {
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age) {
     SuperType.call(this, name); // 构造函数继承(只调了一次)
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
};
inheritPrototype(SubType, SuperType); // 寄生继承
SubType.prototype.sayAge = function() {
     console.log(this.age);
};
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27


这里只调用了一次 SuperType 构造函数,避免了 SubType.prototype 上不必要也用不到的属性;而且,原型链仍然保持不变,instanceof 操作符和 isPrototypeOf() 方法正常有效。


寄生式组合继承可以算是【引用类型】继承的最佳模式


os:不过这里的增强写法,理解起来真是怪,为什么父类的显示原型的构造函数等于子类?


SuperType.prototype.constructor=== SubType // true


大概是为了,通过寄生实现:父类、子类都由同一函数构造;


SubType === SubType.prototype.constructor // true
SuperType.prototype.constructor === SubType.prototype.constructor // true


小结



只要是写 JS 的继承,一定离不开:工厂、构造、原型设计模式;

原型链 + 构造函数 = 组合继承

工厂+构造函数 = 寄生继承;

组合继承和寄生继承是最常用的两种继承方式。

......

u1s1,class 出来前,写 JS 实现继承,是真滴麻烦QAQ


相关文章
|
14天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
34 7
|
14天前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
22 7
|
10天前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
24 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
1天前
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)
|
8天前
|
设计模式 Java 编译器
设计模式——创建型模式(工厂,简单工厂,单例,建造者,原型)
设计模式——创建型模式(工厂,简单工厂,单例,建造者,原型)
|
11天前
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
|
15天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
1天前
|
设计模式 Java 数据库
Java设计模式:桥接模式实现灵活组合,超越单一继承的设计之道(十)
Java设计模式:桥接模式实现灵活组合,超越单一继承的设计之道(十)
|
2天前
|
设计模式 前端开发 Java
设计模式之美学习(八):为何说要多用组合少用继承?如何决定该用组合还是继承?
设计模式之美学习(八):为何说要多用组合少用继承?如何决定该用组合还是继承?
|
5天前
|
JavaScript 前端开发
JavaScript 中,可以使用类继承来创建子类
JavaScript 中,可以使用类继承来创建子类
6 0