在JavaScript中裝飾實例方法的問題

Question

我在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並仍然綁定新的函數屬性？

Answer 1

方法裝飾器在類聲明時運行一次，而不是在實例化類時運行。 這意味着您的示例中的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];
  };
}