자바스크립트 시리즈 심층이해(29): 디자인 패턴의 데코레이터 패턴에 대한 자세한 설명_자바스크립트 스킬

소개

데코레이터는 상속에 대한 보다 유연한 대안을 제공합니다. 데코레이터는 동일한 인터페이스로 객체를 래핑하는 데 사용됩니다. 데코레이터를 사용하면 메서드에 동작을 추가할 수 있을 뿐만 아니라 원래 객체(예: 데코레이터의 생성자)에서 호출할 메서드를 설정할 수도 있습니다.

데코레이터는 오버로드된 메서드 형태로 새로운 기능을 추가하는 데 사용됩니다. 이 모드는 특정 목적을 달성하기 위해 데코레이터 앞이나 뒤에 자신만의 동작을 추가할 수 있습니다.

텍스트

그렇다면 데코레이터 패턴의 장점은 무엇인가요? 앞서 언급했듯이 데코레이터는 상속의 대안입니다. 스크립트가 실행될 때 하위 클래스에 동작을 추가하면 원래 클래스의 모든 인스턴스에 영향을 주지만 데코레이터는 그렇지 않습니다. 대신, 다양한 개체에 개별적으로 새로운 동작을 추가할 수 있습니다. 다음 코드에 표시된 대로:

코드 복사 코드는 다음과 같습니다.

//데코레이션이 필요한 클래스(함수)
함수 Macbook() {
This.cost = 함수 () {
1000을 반환합니다;
};
}

메모리 기능(맥북) {
This.cost = 함수 () {
         macbook.cost() 75 반환;
};
}

BlurayDrive(맥북) 기능 {
This.cost = 함수 () {
         macbook.cost() 300 반환;
};
}

기능보험(맥북) {
This.cost = 함수 () {
         macbook.cost() 250 반환;
};
}

// 사용법
var myMacbook = new Insurance(new BlurayDrive(new Memory(new Macbook())));
console.log(myMacbook.cost());

다음은 데코레이터 객체에서 PerformTask를 호출할 때 일부 데코레이터 동작을 포함할 뿐만 아니라 기본 객체의 PerformTask 함수도 호출하는 또 다른 예입니다.

코드 복사 코드는 다음과 같습니다.

함수 ConcreteClass() {
This.performTask = 함수 () {
This.preTask();
console.log('뭔가를 하는 중');
This.postTask();
};
}

함수 AbstractDecorator(장식됨) {
This.performTask = 함수 () {
          장식.performTask();
};
}

ConcreteDecoratorClass(장식된) 함수 {
This.base = AbstractDecorator;
This.base(장식);

Decorated.preTask = 함수() {
console.log('사전 호출 중..');
};

Decorated.postTask = 함수() {
console.log('post-calling..');
};

}

var Concrete = new ConcreteClass();
var decorator1 = new ConcreteDecoratorClass(콘크리트);
var decorator2 = new ConcreteDecoratorClass(장식자1);
decorator2.performTask();

또 다른 철저한 예:

코드 복사 코드는 다음과 같습니다.

var 트리 = {};
트리.장식 = 함수() {
console.log('나무가 쓰러지지 않도록 하세요');
};

tree.getDecorator = 함수(데코) {
트리[deco].prototype = this;
새 트리 반환[deco];
};

tree.RedBalls = 함수 () {
This.장식 = 함수 () {
This.RedBalls.prototype.장식(); // 7단계: 먼저 프로토타입의 장식 메소드를 실행합니다(이것은 Angel입니다)
console.log('Put on some red ball'); // 8단계 그런 다음 빨간색을 출력합니다
// RedBalls의 장식 방법으로 다음 2단계를 사용합니다
}
};

tree.BlueBalls = 함수 () {
This.장식 = 함수 () {
This.BlueBalls.prototype.장식(); // 1단계: 먼저 프로토타입의 Decorate 메서드, 즉 tree. decorate()를 실행합니다.
console.log('Add blue ball'); // 2단계 파란색을 출력합니다
// BlueBalls의 장식 방법으로 다음 2단계를 사용합니다
}
};

tree.Angel = 함수() {
This.장식 = 함수 () {
This.Angel.prototype.장식(); // 4단계: 먼저 프로토타입의 장식 메소드를 실행합니다(이것은 BlueBalls입니다)
console.log('An angel on the top'); // 5단계 그런 다음 angel을 출력합니다
// 이 2단계를 Angel의 장식 방법으로 사용하세요
}
};

tree = tree.getDecorator('BlueBalls'); // 3단계: BlueBalls 객체를 tree에 할당합니다. 이때 상위 프로토타입의 getDecorator를 계속 사용할 수 있습니다.
tree = tree.getDecorator('Angel'); // 6단계: 트리에 Angel 객체를 할당합니다. 이때 상위 프로토타입의 상위 프로토타입에 있는 getDecorator는 여전히 사용 가능합니다
tree = tree.getDecorator('RedBalls'); // 9단계: RedBalls 객체를 tree에 할당합니다

tree.장식(); // 10단계: RedBalls 개체의 장식 메서드 실행

요약

데코레이터 패턴은 기존 함수에 더 많은 기능을 동적으로 추가하는 방법입니다. 데코레이팅할 각 함수를 별도의 함수에 넣은 다음 이 함수를 사용하여 데코레이션할 기존 함수 객체를 래핑해야 합니다. 호출 코드는 필요에 따라 장식 함수를 선택적으로, 순차적으로 사용하여 개체를 래핑할 수 있습니다. 장점은 클래스(기능)의 핵심 책임과 데코레이션 기능이 분리되어 있다는 점입니다.