Day 14 Decorator Part - 2

今天要来介绍 Decorator Factory，它可以让 Decorator 有更多的可能性，撰写的方法是在 Decorator 外面再包裹一层 function，然後 return Decorator，就可以传参数到外面包裹的那层 function，由里面的 Decorator 来接收参数并做更多的事情。

function logger(logMessage: string) {
  return function (constructor: Function) {
    console.log(logMessage)
    console.log(constructor)
  }
}

@logger('someone is logging')
class Person {
  name = 'Claire'

  constructor() {
    console.log('Create person object...')
  }
}

值得一提的是执行顺序，Decorator 是由下往上执行的，跟 JavaScript 不一样。一样用刚刚的 Decorator Factory 来做示范：

function logger(logMessage: string) {
  return function (constructor: Function) {
    console.log(constructor)
    console.log(logMessage)
  }
}

function signOut(signOutMessage: string) {
  return function (constructor: Function) {
    console.log(signOutMessage)
    console.log(constructor)
  }
}

@signOut('sign out')
@logger('log in')
class Person {
  name = 'Claire'

  constructor() {
    console.log('Create person object...')
  }
}

这边可以看到是先 console 出了 'log in'，才接着 'sign out'，所以要特别记得这边的执行顺序跟 JavaScript 是相反的！不过如果是在 Decorator Factory 里面的程序码的话(写在 return 的上方)，那顺序就会跟我们习惯的一样是由上而下执行的了。

另外还有一点非常重要的是，Decorator 只会在定义的时候就执行完毕，什麽意思呢？比如说今天在一个 class 前面放了 Decorator，那它在一开始就会执行完毕了，如果後面还有用 class 创造的实例，并不会让 Decorator 再重新执行一次，Decorator 的用意是对原本的 class、函式、参数、属性里面的东西再多做一些事情，至於後面怎麽新增或呼叫等等，都不关它的事了。

今天的学习笔记到这边，谢谢阅读。：）