> 웹 프론트엔드 > JS 튜토리얼 > JS 추상 팩토리 패턴에 대한 간략한 분석_기본 지식

JS 추상 팩토리 패턴에 대한 간략한 분석_기본 지식

韦小宝
풀어 주다: 2017-12-15 13:48:29
원래의
1760명이 탐색했습니다.

이 글은 주로 JSAbstract Factory Pattern을 배울 때 저자의 경험과 요약을 요약한 것입니다. 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
로그인 후 복사



Summary

추상 팩토리를 통해, 특정 클래스의 클러스터 제품을 생성할 수 있고, 제품의 카테고리도 인스턴스오브를 통해 확인할 수 있으며, 이러한 유형의 클러스터에 필요한 메소드도 갖추고 있습니다.

관련 권장 사항:

Javascript 추상 팩토리 패턴 상세 설명_javascript Skills


JavaScript 디자인 패턴 추상 팩토리 패턴 소개_javascript Skills


JS Test 오프닝은 어떠세요? 대상 웹사이트의 응답 속도

위 내용은 JS 추상 팩토리 패턴에 대한 간략한 분석_기본 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿