Question

我已经看过ES.next装饰器的一些例子，并注意到有可能将一个装饰器作为一个带参数的因子函数应用，或者直接省略()。在同一时间结束。

我设法让这两种风格分开工作，作为工厂函数@decorate(withArgs)，或直接@decorate，但不是两者都有！

这是一个例子： https://github.com/jayphelps/core-decorators.js#deprecate-alias-deprecated

class foo {

  @deprecate
  foo() {}

  @deprecate("with an optional string")
  bar() {}
}

我试图检查上面提到的源代码，但由于我对装饰器的经验有限，我无法弄清楚如何设置这样的东西。

以下是我如何在不使用任何参数的情况下让@decorate工作

function decorate(target, key, descriptor) {
  // do some stuff and then return the new descriptor
}

以下是我设法让@decorate(args)使用参数作为工厂函数的方法：

function decorate(...args) {
  return function(target, key, descriptor) {
    // do some stuff using args and then return the new descriptor
  }
}

正如您所看到的那样，它可能是decorate foo()或decorate(args) foo()，而不是两者。

Answer 1

在编写map[][]时，浏览器需要立即调用装饰器函数，在编写@decorator时，它希望首先调用工厂，这将返回装饰器功能。

这是我写的一个装饰器的例子，它为类添加了一个状态属性由redux驱动

@decorator(args)

请注意，示例中的装饰器是类装饰器，其中与您的方法装饰器具有不同的签名export default function state (defaultState) { function reducer(state, action) { if (!state) { state = defaultState; } ... } function decorator (target) {...} // If 1st argument is a function, it means `@state` was written if (typeof defaultState === 'function') { let target = defaultState; defaultState = {}; return decorator(target); } else { return decorator; } } 写(target)

装饰器可以使用或不使用参数

(target, key, descriptor)

Jay Phelps正在抽象出弄清楚如何在import state from './decorators/redux-state' @state({ name: '', }) class MyClass { ... } @state class MyOtherClass { constructor(state= {name: ''}) { this.state = state; } ... }效用函数中调用装饰器的逻辑，而且他的代码难以理解。

希望这有帮助

ES.next装饰器可直接调用或作为工厂函数调用

1 个答案: