소개하다
데코레이터는 상속보다 유연한 대안을 제공합니다. 데코레이터는 동일한 인터페이스를 래핑하는 데 사용되는 물체를 사용하여 메소드에 동작을 추가 할 수있을뿐만 아니라 원래 객체 호출 (예 : 데코레이터 생성자)에 메소드를 설정할 수 있습니다.
데코레이터는 과부하 된 방법의 형태를 통해 새로운 기능을 추가하는 데 사용됩니다. 이 모드는 특정 목적을 달성하기 위해 데코레이터 전후에 자체 동작을 추가 할 수 있습니다.
텍스트
그렇다면 데코레이터 모드의 이점은 무엇입니까? 앞에서 언급했듯이, 데코레이터는 상속을 달성하기위한 대안입니다. 스크립트가 실행될 때 서브 클래스에 동작을 추가하면 원래 클래스의 모든 인스턴스에 영향을 미치지 만 데코레이터는 그렇지 않습니다. 대신 다른 객체에 새로운 동작을 추가 할 수 있습니다. 다음 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 장식이 필요한 클래스 (함수)
함수 macbook () {
this.cost = function () {
반환 1000;
};
}
기능 메모리 (MacBook) {
this.cost = function () {
return macbook.cost () + 75;
};
}
함수 BlurayDrive (MacBook) {
this.cost = function () {
MacBook.cost () + 300을 반환합니다.
};
}
기능 보험 (MacBook) {
this.cost = function () {
MacBook.cost () + 250을 반환합니다.
};
}
// 용법
var mymacbook = new Insurance (New Bluraydrive (New Memory (New MacBook ()));
console.log (mymacbook.cost ());
아래는 또 다른 예입니다. 데코레이터 객체에서 Performtask를 호출 할 때 데코레이터 동작뿐만 아니라 하부 물체의 Performtask 기능을 호출합니다.
코드 사본은 다음과 같습니다.
함수 concreteclass () {
this.performtask = function () {
this.pretask ();
Console.log ( 'Something Doing');
this.posttask ();
};
}
함수 actractDecorator (Decorated) {
this.performtask = function () {
decorated.performtask ();
};
}
기능 ConcretedEcoratorClass (Decorated) {
this.base = AbstractDecorator;
this.base (장식);
decorated.pretask = function () {
Console.log ( '사전 전달 ..');
};
decorated.posttask = function () {
Console.log ( 'Post-Calling ..');
};
}
var 콘크리트 = 새로운 콘크리트 클래스 ();
var decorator1 = 새로운 ConcretedecoratorClass (콘크리트);
var decorator2 = 새로운 ConcretedecoratorClass (Decorator1);
decorator2.performtask ();
또 다른 철저한 예를 들어 봅시다 :
코드 사본은 다음과 같습니다.
var tree = {};
tree.decorate = function () {
Console.log ( '트리가 추출되도록/'t 가을 ');
};
tree.getDecorator = function (deco) {
트리 [deco]. prototype = this;
새로운 트리를 반환 [데코];
};
tree.redballs = function () {
this.decorate = function () {
this.redballs.prototype.decorate (); // 7 단계 : 먼저 프로토 타입을 실행합니다 (This Is Angel) 장식 방법
Console.log ( '빨간색 공을 입어라'); // 8 단계 출력 빨간색
//이 두 단계를 redball의 장식 방법으로 사용합니다.
}
};
tree.blueballs = function () {
this.decorate = function () {
this.blueballs.prototype.decorate (); // 1 단계 : 먼저 프로토 타입의 장식 방법, 즉 tree.decorate ()를 실행합니다.
Console.log ( '파란색 공 추가'); // 2 단계 출력 파란색
// 블루볼이 장식하는 방법에 따라이 두 단계를 사용합니다.
}
};
tree.angel = function () {
this.decorate = function () {
this.angel.prototype.decorate (); // 4 단계 : 먼저 프로토 타입을 실행합니다 (이것은 블루볼입니다) 장식 방법
Console.log ( '상단의 천사'); // 5 단계 출력 천사
//이 두 단계를 천사의 장식 방법으로 사용하십시오
}
};
tree = tree.getDecorator ( 'Blueballs'); // 3 단계 : 블루볼 객체를 트리에 할당하고 부모 프로토 타입의 getDecorator를 여전히 사용할 수 있습니다.
tree = tree.getDecorator ( 'Angel'); // 6 단계 : 천사 대상을 나무에 할당합니다. 현재 부모 프로토 타입의 상위 프로토 타입의 getDecorator는 여전히 사용할 수 있습니다.
tree = tree.getDecorator ( 'redballs'); // 9 단계 : 레드 볼 객체를 트리에 할당합니다
tree.decorate (); // 10 단계 : 레드 볼 대상의 장식 메소드 실행
요약
데코레이터 패턴은 기존 기능에 더 많은 기능을 동적으로 추가하는 방법입니다. 장식 할 각 함수는 별도의 기능으로 배치 된 다음이 기능을 사용하여 기존 기능 객체를 랩핑 할 예정입니다. 따라서 특수 행동을 수행 해야하는 경우, 호출 코드는 선택적이고 순차적으로 장식 기능을 사용하여 필요에 따라 물체를 랩핑 할 수 있습니다. 장점은 클래스 (함수)의 핵심 책임을 장식 기능과 구별한다는 것입니다.