JavaScript 的Decorator 装饰器介绍-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JavaScript 的Decorator 装饰器介绍

简介: Angular大量使用了JS的装饰器特性,先看 ruanyifeng的介绍 使用babel转换 步骤 : npm install -g babel-cli npm init; npm install --save-dev babel-plugin-t...

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"


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章