2

我在装饰 ES6 中的实例方法时遇到了一个难题。我在装饰该方法时没有问题，但它似乎被困在类实例的单一状态中。这是我正在处理的具体内容：

class Test {
    init() {
        this.foo = 'bar';
    }

    @decorator
    decoratedMethod() {
        console.log(this.foo); // undefined
    }
}

let test = new Test();
test.init();
test.decoratedMethod();

function decorator(target, name, descriptor) {
     let fn = target[ name ].bind(target, 'a', 'b');
     return fn;
}

我意识到上面的代码正在做它应该做的事情，但是如果我想访问foo和添加到范围中的其他属性，我该如何装饰decoratedMethod并仍然绑定新的函数属性？

4

1 回答 1

4

方法装饰器在类声明时运行一次，而不是在类实例化时运行。这意味着target您的示例中的 是Test.prototype，而不是实例。所以你的例子本质上是：

class Test {
  init() {
    this.foo = 'bar';
  }

  decoratedMethod() {
    console.log(this.foo); // undefined
  }
}

Test.prototype.decoratedMethod = 
    Test.prototype.decoratedMethod.bind(Test.prototype, 'a', 'b');

这应该清楚地说明您的代码失败的原因。您绑定的对象没有foo属性，只有实例有。

如果您希望为每个实例处理您的装饰器，事情会变得更加复杂，您需要在创建实例后进行绑定。一种方法是

function decorator(target, name, descriptor){
  const {value} = descriptor;
  delete descriptor.value;
  delete descriptor.writable;
  descriptor.get = function(){
    // Create an instance of the bound function for the instance.
    // And set an instance property to override the property
    // from the object prototype.
    Object.defineProperty(this, name, {
      enumerable: descriptor.enumerable,
      configurable: descriptor.configurable,
      value: value.bind(this, 'a', 'b'),
    });

    return this[name];
  };
}
于 2016-01-28T22:28:58.030 回答