JS 추상 팩토리 패턴 정보(자세한 튜토리얼)

이 글은 주로 JS 추상 팩토리 패턴을 배울 때 저자의 경험과 요약을 요약한 것입니다. 관심 있는 친구들은 따라해 볼 수 있습니다.

다음은 저자가 연구 중에 직면한 문제와 코드 예제입니다. 마지막으로 그는 JS 추상 팩토리 패턴에 대해 배운 내용을 요약합니다.

Abstract Factory 패턴(Abstract Factory)은 클래스 추상화를 사용하여 특정 유형의 제품 인스턴스에 대한 책임을 지지 않고 제품 클래스 클러스터 생성에 적합한 비즈니스를 만듭니다.

JS에는 직접적인 추상 클래스가 없습니다. Abstract는 예약어이지만 아직 구현되지 않았습니다. 따라서 상속된 하위 클래스가 재정의되지 않으면 클래스 메서드에서 오류를 발생시켜야 합니다. 호출된 이 메소드는 오류가 발생합니다.

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

Implementation

객체 지향 언어에는 추상 팩토리 패턴이 있습니다. 먼저, 특정 유형의 제품에 필요한 특성을 요약하기 위해 추상 클래스를 상위 클래스로 선언합니다. 클래스에 선언된 메소드는 상위 클래스에 선언된 함수를 구현합니다.

/**
* 实现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

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js에서 파일 형식 크기를 결정하는 방법

js에서 슬라이딩 확인이 필요한 로그인을 구현하는 방법

Angular에서 드롭다운 상자 퍼지 쿼리 기능을 구현하는 방법

Nodejs에서 암호화 모듈 보안에 대한 지식(자세한 튜토리얼)

Angularjs에서 페이징 및 검색 기능을 구현하는 방법

vue를 사용하여 ueditor 및 노드 배경 구성을 소개하는 방법

작은 프로그램 배경을 구축하는 방법 Node.js 서비스

js의 파일 로딩 최적화 관련 문제

nodejs+mongodb+vue

를 사용하여 ueditor를 구성하는 방법

위 내용은 JS 추상 팩토리 패턴 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!