Original artial --> link

How descorator looks like:

@mydecorator

function myFun(){

  ...

}

Descorator in action:

We have a class, which have an method call meow():

class Cat {

  meow(){

     console.log(`Meow!!`);

  }

}

When Javascritp Engine read it, it looks like:

Object.defineProperty(Cat.prototype, 'meow', {

    value: specifiedFunction,

    enumerable: false,

    configurable: true,

    writable: true,

})

Imagine we want to mark a property or method name as not being writable. A decorator precedes the syntax that defines a property. We could thus define a`@readonly` decorator for it as follows:

function readonly(target, key, descriptor){

    descriptor.writable = false;

    return descriptor;

}

and add it to our meow property as follows:

class Cat {

    @readonly

    meow() {

        return `say meow!`

    }

}

Now, before installing the descriptor onto `Cat.prototype`, the engine first invokes the decorator:

Then if you have mark 'writable' to 'false' by adding  @readonly descortaor,  if we trying to overwrite the 'meow' method, it will report error.

Check out libaray, it has many pre-defined descorators: npm, Github

Decorate a class:

function superhero(isSuperhero ){

    return function(target){

        return class{

            isSuperhero = isSuperhero

        }

    }

}

@superhero(true)

class MySuperHero{

    isSuperhero = null;

    constructor(){}

}

const hero = new MySuperHero();

console.log(hero.isSuperhero); //true

Continue reading:

• https://github.com/wycats/javascript-decorators
• https://github.com/jayphelps/core-decorators.js
• http://blog.developsuperpowers.com/eli5-ecmascript-7-decorators/
• http://elmasse.github.io/js/decorators-bindings-es7.html
• http://raganwald.com/2015/06/26/decorators-in-es7.html
• Jay’s function expression ES2016 Decorators example