详解ES6超好用的语法糖Decorator

什么是Decorator

Decorator是ES7中的新语法，可以被用于修改类和类的方法。它们被称为语法糖，因为它们用一种更简单的方式实现了类似于继承的功能。Decorator在AngularJS中被广泛地使用。

如何实现Decorator

在使用Decorator之前，你需要在你的代码中使用Babel或其他转换器将装饰符(Decorators)转换为ECMAScript 5或6代码。你可以使用以下命令安装Babel：

npm install babel --save-dev

安装Babel后，你可以使用以下命令来转换你的代码：

./node_modules/.bin/babel src --out-dir lib

以上命令将使用Babel将src目录中的代码转换为lib目录中的代码。

对类进行修饰

在ES6中，Decorators允许你装饰一个类。Decorators是放在类声明上的，包裹着类的定义，通过包装类的语法，使得装饰器的行为和类的行为可以一样。

下面是一个使用了ES6语法修饰的类：

@log
class MyClass {
    //...
}

function log(target) {
    console.log(target);
}

在这个例子中，log函数是一个修饰符。当MyClass被定义时，它的构造函数被传递给log函数。

对类的方法进行装饰

Decorators还可以用来装饰类中的方法。下面是一个使用Decorators装饰方法的示例：

class MyClass {
  @validate
  set name(value) {
    this._name = value;
  }

  get name() {
    return this._name;
  }
}

function validate(target, name, descriptor) {
  let method = descriptor.value;

  descriptor.value = function(...args) {
    if (!args[0]) {
      throw new TypeError("Invalid name provided");
    }

    return method.apply(this, args);
  };

  return descriptor;
}

在这个例子中，我们使用@validate装饰方法set name来验证传入的参数是否合法。

结论

ES6 Decorator是一种很好用的语法糖，它可以帮助我们处理很多通用的问题，从而简化开发工作。在使用Decorator时，你需要注意Decorator的用法，确保你的代码能够顺利运行。