Node.js 디자인 패턴: 데코레이터 패턴이란 무엇입니까? JS 데코레이터 패턴 소개

이 기사에서는 js 디자인 패턴에 대한 내용을 제공합니다. 데코레이터 패턴이란 무엇입니까? js 데코레이터 모드의 도입은 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

데코레이터 패턴이란 무엇인가요?

정의: 객체에 일부 추가 책임을 동적으로 추가합니다. 기능 추가 측면에서 데코레이터 패턴은 하위 클래스를 생성하는 것보다 더 유연합니다.

주요 솔루션: 일반적으로 상속을 사용하여 클래스를 확장하는 경우가 많습니다. 상속은 클래스에 정적 기능을 도입하고 확장 기능이 증가하면 하위 클래스도 확장됩니다.

사용 시기: 많은 하위 클래스를 추가하지 않고 클래스를 확장합니다.

해결 방법: 특정 기능적 책임을 나누고 데코레이터 패턴을 상속합니다.

JS 데코레이터 패턴 적용 예: 1. Sun Wukong은 "사원"이 될 때 여전히 기본적으로 원숭이이지만 사원의 기능을 가지고 있습니다. 2. 그림은 액자 유무에 관계없이 벽에 걸 수 있지만, 일반적으로 액자가 있고 실제로는 액자가 벽에 걸려 있습니다. 벽에 걸기 전에 그림을 유약 처리하고 액자에 넣은 다음 그림, 유리 및 프레임이 하나의 개체를 형성합니다.

js 데코레이터 패턴의 장점: 데코레이팅 클래스와 데코레이팅된 클래스는 독립적으로 개발할 수 있으며 서로 결합되지 않습니다. 데코레이팅 패턴은 구현 기능을 동적으로 확장할 수 있습니다. 수업.

JS 데코레이터 패턴 단점: 다층 장식은 더 복잡합니다.

js 데코레이터 패턴 사용 시나리오: 1. 클래스의 기능을 확장합니다. 2. 동적으로 기능을 추가하고 동적으로 취소합니다.

참고: 상속 대신 사용할 수 있습니다.

js 데코레이터 패턴 예

실제 예: 날씨가 추울 때는 옷을 추가하여 따뜻하게 유지하고, 코트를 벗으십시오. 이 예는 날씨에 따라 데코레이터의 매력을 생생하게 포착합니다. 옷은 온도와 기온의 변화에 ​​따라 동적으로 입고 벗을 수 있습니다.

let wear = function() {
  console.log('穿上第一件衣服')
}

const _wear1 = wear

wear = function() {
  _wear1()
  console.log('穿上第二件衣服')
}

const _wear2 = wear

wear = function() {
  _wear2()
  console.log('穿上第三件衣服')
}

wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

이 방법에는 다음과 같은 단점이 있습니다. 1: 임시 변수가 점점 더 많아집니다. 2: 이 포인터가 때때로 잘못됩니다.

AOP 장식 기능

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(this, arguments)
    return self.apply(this, arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(this, arguments)
    return fn.apply(this, arguments)
  }
}

위의 옷을 입는 데모를 실험하려면 포스트 코드를 사용하세요.

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

js 디자인 패턴: 중재자 패턴이란 무엇입니까? js 조정자 패턴 소개

js 디자인 패턴: 책임 사슬 패턴이란 무엇인가요? JS 책임 사슬 패턴 소개

js 디자인 패턴: 플라이웨이트 패턴이란? js 플라이웨이트 모드 소개

위 내용은 Node.js 디자인 패턴: 데코레이터 패턴이란 무엇입니까? JS 데코레이터 패턴 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!