JavaScript 的Decorator 裝飾器介紹

Angular大量使用了JS的裝飾器特性，先看 ruanyifeng的介紹

使用babel轉換

步驟 ：

1. npm install -g babel-cli
2. npm init; npm install --save-dev babel-plugin-transform-decorators-legacy
3. babel --plugins transform-decorators-legacy 1.js > 1.es5.js

例1

@eat
class Person {
  constructor() {}
}

function eat(target, key, descriptor) {
  console.log('吃飯');
  console.log(target);
  console.log(key);
  console.log(descriptor);
  target.prototype.act = '我要吃飯';
}

const jack = new Person();
console.log(jack.act);
           

轉換後

var _class;

let Person = eat(_class = class Person {
  constructor() {}
}) || _class;

function eat(target, key, descriptor) {
  console.log('吃飯');
  console.log(target);
  console.log(key);
  console.log(descriptor);
  target.prototype.act = '我要吃飯';
}

const jack = new Person();
console.log(jack.act);

// 吃飯
// [Function: Person]
// undefined
// undefined
// 我要吃飯
           

例2

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}


const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"
           

babel 後

var _dec, _class;

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

const Foo = {
  foo() {
    console.log('foo');
  }
};

let MyClass = (_dec = mixins(Foo), _dec(_class = class MyClass {}) || _class);


let obj = new MyClass();
obj.foo(); // "foo"