Привязать это при использовании декораторов-декораторов в реактиве

Question

Как связать this с transform-decorators-legacy Babel plugin? Например, у меня есть простой декоратор. Декоратор работает, но this не определен по методу компонента.

fucntion myDecorator(target, name, descriptor) { 
    var oldValue = descriptor.value; 

    descriptor.value = function() { 
     ...// Doing some stuff here I need the decorator for 
     ...// (for example logging on every method call) 
     return oldValue.apply(null, arguments); 
    }; 

    return descriptor; 

} 

class MyClass extends React.Component { 
    @myDecorator 
    myMethod() { 
     ...// this.props... is unavailable here(`this` is undefined) 
    } 
} 

Если я пытаюсь использовать @myDecorator с некоторыми @autobind декораторов я получаю TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, потому что

Дескриптор данных это свойство, которое имеет значение, которое может или не может быть доступен для записи. Дескриптор доступа - это свойство, описываемое парой функций getter-setter. Дескриптор должен быть одним из этих двух вариантов; это не может быть и то, и другое.

В моем примере я не могу использовать value() и get().

Связывание в конструкторе (this.myMethod = thid.myMethod.bind(this)) также не очень полезно, потому что вы связываете метод без декодирования.

Answer 1

Не проблема с .bind ing оформленные методы.

Но есть что-то, что вы пропустили. Даже если вы сделали .bindmyMethod в вашем constructor классу, когда вы его вызываете, независимо от того, где myDecorator изменяет область выполнения.

oldValue.apply(null, arguments)

В принципе, вы заменили целевой объем (MyClass) с null.

Так что вы хотите, это:

oldValue.apply(this, arguments)

Смотрите эту скрипку: http://jsfiddle.net/free_soul/0n6v1dtp/

Answer 2

Это, как мне удалось решить эту: Используя код из упомянутого @autobind декоратора:

function myDecorator(target, key, descriptor) { 
    let fn = descriptor.value; 

    return { 
     configurable: true, 

     get() { 
      let boundFn = fn.bind(this); 
      Reflect.defineProperty(this, key, { 
       value: boundFn, 
       configurable: true, 
       writable: true 
      }); 

      return function() { 
       ...// Doing some stuff here I need the decorator for 
       ...// (for example logging on every method call) 
       return boundFn.apply(this, arguments) 
      }; 
     } 
    }; 
}