JavaScript 的装饰器：它们是什么及如何使用

请访问个人独立博客地址：https://imsense.site/2017/06/js-decorator/

装饰器的流行应该感谢在Angular 2+中使用，在Angular中，装饰器因TypeScript能使用。可是在JavaScript中，还处于提议阶段。本文将介绍装饰器是什么，及装饰器如何让代码更加简洁和容易理解。

什么是装饰器

装饰器是用一个代码包装另外一个代码的简单方式。

这个概念与以前所听过的函数复合和高阶组件类似。

这已经用于不少状况，就是简单的将一个函数包装成另外一个函数：

function doSomething(name) {
  console.log('Hello, ' + name);
}

function loggingDecorator(wrapped) {
  return function() {
    console.log('Starting');
    const result = wrapped.apply(this, arguments);
    console.log('Finished');
    return result;
  }
}

const wrapped = loggingDecorator(doSomething);

上个例子产生新函数wrapped，此函数与doSomething作一样事情，可是他们不一样在于在包装函数以前和以后输出一些语句。

doSomething('Graham');
// Hello, Graham
wrapped('Graham');
// Starting
// Hello, Graham
// Finished

如何使用JavaScript装饰器

JavaScript中装饰器使用特殊的语法，使用@做为标识符，且放置在被装饰代码以前。

注意：如今装饰器还处于提议阶段，意味着还有能够变化之处

能够放置许多装饰器在一样代码以前，而后解释器会按照顺序相应执行

@log()
@immutable()
class Example {
  @time('demo')
  doSomething() {

  }
}

上例中定义了一个类，采用了三个装饰器：两个用于类自己，一个用于类的属性：

• @log能记录全部全部访问类
• @immutable让类不可变-也许新实例调用了Object.freeze
• @time会记录一个方法从执行到输出一个独特标签

如今，虽然如今浏览器或Node还没支持。可是若是使用Babel，能使用 transform-decorators-legacy插件使用装饰器。

插件中使用legacy是由于Babel 5支持处理装饰器，可是它也许会跟最终的标准有区别，因此才使用legacy这个词。

为何使用装饰器

函数复合在JavaScript已经成为可能，可是它至关困难或不可能用于另外一个代码（如类或类属性）。

装饰器提议能够用于类或属性，将来JavaScript版本可能会增长用于其余地方。

装饰器也考虑到采用较为简洁的语法。

不一样类型的装饰器

如今，装饰器只支持类和类属性，这包含属性、方法、get函数和set函数

装饰器只会在程序第一次运行时执行一次，装饰的代码会被返回的值代替

类属性装饰器

属性装饰器适用于类的单独成员-不管是属性、方法、get函数或set函数。
装饰器函数调用三个参数：

• target-被修饰的类
• name-类成员的名字
• descriptor-成员描述符。对象会将这个参数传给Object.defineProperty

@readonly是经典的例子：

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

上例会将成员描述符中的writable设为false。

接着用于类中属性：

class Example {
  a() {}
  @readonly
  b() {}
}

const e = new Example();
e.a = 1;
e.b = 2;
// TypeError: Cannot assign to read only property 'b' of object '#<Example>'

可是咱们能够作的更好，能够用别的形式代替装饰函数。例如，记录全部的输入和输出：

function log(target, name, descriptor) {
  const original = descriptor.value;
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Arguments: ${args}`);
      try {
        const result = original.apply(this, args);
        console.log(`Result: ${result}`);
        return result;
      } catch (e) {
        console.log(`Error: ${e}`);
        throw e;
      }
    }
  }
  return descriptor;
}

注意咱们使用了扩展运算符，会自动将全部参数转为数组。

class Example {
    @log
    sum(a, b) {
        return a + b;
    }
}

const e = new Example();
e.sum(1, 2);
// Arguments: 1,2
// Result: 3

可让装饰器获取一些参数，例如重写log装饰器以下：

function log(name) {
  return function decorator(t, n, descriptor) {
    const original = descriptor.value;
    if (typeof original === 'function') {
      descriptor.value = function(...args) {
        console.log(`Arguments for ${name}: ${args}`);
        try {
          const result = original.apply(this, args);
          console.log(`Result from ${name}: ${result}`);
          return result;
        } catch (e) {
          console.log(`Error from ${name}: ${e}`);
          throw e;
        }
      }
    }
    return descriptor;
  };
}

这与以前的log装饰器相同，只是利用了外部函数的name参数。

class Example {
  @log('some tag')
  sum(a, b) {
    return a + b;
  }
}

const e = new Example();
e.sum(1, 2);
// Arguments for some tag: 1,2
// Result from some tag: 3

类装饰器

类装饰器用于整个类，装饰器函数的参数为被装饰的构造器函数。

注意只用于构造器函数，而不适用于类的每一个实例。这就意味着若是想控制实例，就必须返回一个包装版本的构造器函数。

一般，类装饰器没什么用处，由于你所须要作的，一样能够用一个简单函数来处理。你所作的只须要在结束时返回一个新的构造函数来代替类的构造函数。

回到咱们记录那个例子，编写一个记录构造函数参数：

function log(Class) {
  return (...args) => {
    console.log(args);
    return new Class(...args);
  };
}

这里接收一个类做为参数，返回新函数做为构造器。此函数打印出参数，返回这些参数构造的实例。

例如：

@log
class Example {
  constructor(name, age) {
  }
}

const e = new Example('Graham', 34);
// [ 'Graham', 34 ]
console.log(e);
// Example {}

构造Example类时会输出提供的参数，构造值e也确实是Example的实例。

传递参数到类装饰器与类成员同样。

function log(name) {
  return function decorator(Class) {
    return (...args) => {
      console.log(`Arguments for ${name}: args`);
      return new Class(...args);
    };
  }
}

@log('Demo')
class Example {
  constructor(name, age) {}
}

const e = new Example('Graham', 34);
// Arguments for Demo: args
console.log(e);
// Example {}

真实例子

Core decorators

Core decorators是一个库，提供了几个常见的修饰器，经过它能够更好地理解修饰器。

想理解此库，也能够去看看阮老师的关于此库的介绍

React

React普遍运用了高阶组件，这让React组件成为一个函数，而且能包含另外一个组件。
使用装饰器是不错的替代法，例如，Redux库有一个connect函数，用于链接React组件和React store。

一般，是这么使用的：

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

然而，可使用装饰器代替：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

参考资料

JavaScript Decorators: What They Are and When to Use Them
阮老师ES6入门-修饰器