デコレータES2016を分解します

デコレータパターン

@mydecorator def myfunc(): pass
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ES5およびES2015（別名ES6）のデコレーター

ES2016デコレーターの動作

プロパティを飾る

 class Cat { meow() { return `${this.name} says Meow!`} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  Object.defineProperty(Cat.prototype, 'meow', { value: specifiedFunction, enumerable: false, configurable: true, writable: true });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  function readonly(target, key, descriptor) { descriptor.writable = false; return descriptor; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  class Cat { @readonly meow() { return `${this.name} says Meow!`} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  let descriptor = { value: specifiedFunction, enumerable: false, configurable: true, writable: true }; //     ,   "Object.defineProperty", //       ,  // "Object.defineProperty"   descriptor = readonly(Cat.prototype, 'meow', descriptor) || descriptor; Object.defineProperty(Cat.prototype, 'meow', descriptor);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  let garfield = new Cat(); garfield.meow = () => { console.log('I want lasagne!'); }; // !        .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  import { readonly } from 'core-decorators'; class Meal { @readonly entree = 'steak'; } let meal = new Meal(); meal.entree = 'salmon'; // !
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デコレータはconsole.warn（）を呼び出し、警告メッセージを表示します。 このメッセージは再定義できます。 将来の参照用にリンクの追加もサポートしています。

  import { deprecate } from 'core-decorators'; class Person { @deprecate facepalm() {} @deprecate('We are stopped facepalming.') facepalmHard() {} @deprecate('We are stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' }) facepalmHarder() {} } let captainPicard = new Person(); captainPicard.facepalm(); // DEPRECATION Person#facepalm will be removed in future versions captainPicard.facepalmHard(); // DEPRECATION Person#facepalmHard: We are stopped facepalming. captainPicard.facepalmHarder(); // DEPRECATION Person#facepalmHarder: We are stopped facepalming. // // See http://knowyourmemes.com/memes/facepalm for more details //
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスを飾る

 function superhero(target) { target.isSuperhero = true; target.power = 'flight'; } @superhero class MySuperHero {} console.log(MySuperHero.isSuperhero); // true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function superhero(isSuperhero) { return function (target) { target.isSuperhero = isSuperHero; target.power = 'flight'; } } @superhero(false) class MySuperHero {} console.log(MySuperHero.isSuperhero); // false
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ES2016デコレータとミキサー

  function mixin(behaviour, sharedBehaviour = {}) { const instanceKeys = Reflect.ownKeys(behaviour); const sharedKeys = Reflect.ownKeys(sharedBehaviour); const typeTag = Symbol('isa'); function _mixin(clazz) { for (let property of instanceKeys) { Object.defineProperty(clazz.prototype, property, { value: behaviour[property] }); } Object.defineProperty(clazz.prototype, typeTag, { value: true}); return clazz; } for(let property of sharedKeys) { Object.defineProperty(_mixin, property, { value: sharedBehaviour[property], enumerable: sharedBehaviour.propertyIsEnumerable(property) }); } Object.defineProperty(_mixin, Symbol.hasInstance, { value: (i) => !!i[typeTag] }); return _mixin; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  class ComicBookCharacter { constructor(first, last) { this.firstName = first; this.lastName = last; } realName() { return this.firstName + ' ' + this.lastName; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  const SuperPowers = mixin({ addPower(name) { this.powers().push(name); return this; }, powers() { return this._powers_pocessed || (this._powers_pocessed = []); } }); const UtilityBelt = mixin({ addToBelt(name) { this.utilities().push(name); return this; }, utilties() { return this._utility_items || (this._utility_items = []); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  @SuperPowers @UtilityBelt class ComicBookCharacter { constructor(first, last) { this.firstName = first; this.lastName = last; } realName() { return this.firstName + ' ' + this.lastName; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  const batman = new ComicBookCharacter('Bruce', 'Wayne'); console.log(batman.realName()); // Bruce Wayne batman .addToBelt('batarang') .addToBelt('cape'); console.log(batman.utilities()); // ['batarang', 'cape'] batman .addPower('detective') .addPower('voice sounds like Gollum has asthma'); console.log(batman.powers()); // ['detective', 'voice sounds like Gollum has asthma']
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Babelにデコレータを理解させる

  babel --optional es7.decorators
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  babel.transform('code', { optional: ['es7.decorators'] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトでデコレータを使用しないのはなぜですか？

便利なリンク