A brief analysis of JS abstract factory pattern_Basic knowledge

This article mainly summarizes the author’s experience and summary when learning JSAbstract Factory Pattern, there is JS source code analysis, yes JS If you are interested, please follow along and learn.

The following are the problems and code examples the author encountered during his study. Finally, he also summarizes the learning about the JS abstract factory pattern.

The Abstract Factory pattern (Abstract Factory) uses class abstraction to make the business suitable for the creation of a product class cluster without being responsible for the instances of a certain type of product.

There is no direct Abstract class in JS. Abstract is a reserved word, but it has not been implemented yet, so we need to throw an error in the class method to simulate the abstract class. If it is inherited If the method is called without overriding it in the subclass, an error will be thrown.

const Car = function() { }
Car.prototype.getPrice = function() {return new Error('抽象方法不能调用')}

Implementation

Object-oriented There is an abstract factory pattern in the language. First, declare an abstract class as a parent class to summarize the characteristics required by a certain type of product. Subclasses that inherit the parent class need to implement the methods declared in the parent class and implement the methods in the parent class. Declared Features:

/**
* 实现subType类对工厂类中的superType类型的抽象类的继承
* @param subType 要继承的类
* @param superType 工厂类中的抽象类type
*/
const VehicleFactory = function(subType, superType) {
 if (typeof VehicleFactory[superType] === 'function') {
  function F() {
   this.type = '车辆'
  } 
  F.prototype = new VehicleFactory[superType]()
  subType.constructor = subType
  subType.prototype = new F()        // 因为子类subType不仅需要继承superType对应的类的原型方法，还要继承其对象属性
 } else throw new Error('不存在该抽象类')
}
VehicleFactory.Car = function() {
 this.type = 'car'
}
VehicleFactory.Car.prototype = {
 getPrice: function() {
  return new Error('抽象方法不可使用')
 },
 getSpeed: function() {
  return new Error('抽象方法不可使用')
 }
}
const BMW = function(price, speed) {
 this.price = price
 this.speed = speed
}
VehicleFactory(BMW, 'Car')    // 继承Car抽象类
BMW.prototype.getPrice = function() {    // 覆写getPrice方法
 console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
 console.log(`BWM speed is ${this.speed}`)
}
const baomai5 = new BMW(30, 99)
baomai5.getPrice()             // BWM price is 30
baomai5 instanceof VehicleFactory.Car    // true

##Summary

Related recommendations:

javascript abstract factory pattern detailed description_javascript skills

Introduction to the abstract factory pattern of JavaScript design patterns_javascript skills

How to JS Test the opening response speed of the target website

The above is the detailed content of A brief analysis of JS abstract factory pattern_Basic knowledge. For more information, please follow other related articles on the PHP Chinese website!