一文读懂ES7中的JavaScript修饰器

什么是修饰器

JavaScript修饰器是一种表达式，用于修改类的行为。修饰器通常是一个函数，接收一个类作为参数，然后返回一个包含被修饰后的类的新类。修饰器可以用来修改类的属性、方法或者整个类的行为。

在ES7中，修饰器已经成为了官方规范的一部分，被纳入了JS标准中。可以通过在类、属性或方法前面添加@修饰器名称的方式来使用修饰器。

修饰器实现

下面是一个简单的修饰器实现：

function log(target) {
  const original = target.prototype.someMethod;

  target.prototype.someMethod = function (...args) {
    console.log("before someMethod");

    const result = original.apply(this, args);

    console.log("after someMethod");

    return result;
  }

  return target;
}

@log
class MyClass {
  someMethod() {
    console.log("run someMethod");
  }
}

在上面的代码中，修饰器log接收一个类作为参数，在类中添加了一个before someMethod和after someMethod的日志打印。最终，通过将这个修饰器添加到MyClass类上，MyClass类的someMethod方法通过调用log修饰器被修改了。

修饰器示例

1. 限制类的属性的值

function range(value) {
  return function (target, key) {
    let _value = value;

    Object.defineProperty(target, key, {
      get() {
        return _value;
      },
      set(value) {
        if (value < 0) {
          _value = 0;
        }else if (value > 100) {
          _value = 100;
        }else {
          _value = value;
        }
      }
    });

    return target;
  }
}

@range(50)
class Student {
  @range(90)
  score;

  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  getName() {
    console.log(this.name);
  }

  getScore() {
    console.log(this.score);
  }
}

const student = new Student("小明", 80);

console.log(student.score); // 80
student.score = -10;
console.log(student.score); // 0
student.score = 200;
console.log(student.score); // 100

上面的代码中，我们定义了一个名为range的修饰器。这个修饰器可以用来限制类的属性的值必须在某个范围内。可以通过在类的属性前添加@range来使用这个修饰器。

在Student类中，我们为score属性后使用了@range(90)修饰器，使得score属性必须在0到90之间。在Student类的构造函数中，我们创建了一个名为student的实例，并传入了一个成绩为80的学生。

最后，我们分别打印了student对象的成绩属性，并尝试将成绩设置为负数和超出90的数值，检验了@range修饰器的作用。

2. 定义路由与中间件

const routes = {};

function route(path) {
  return function (target, key, descriptor) {
    routes[path] = routes[path] || {};
    routes[path].method = "get";
    routes[path][routes[path].method] = descriptor.value;
  }
}

function middleware(m) {
  return function (target, key, descriptor) {
    const original = descriptor.value;
    descriptor.value = function () {
      const result = m();
      if (result) {
        return original.apply(this, arguments);
      }
      return "error";
    }
  }
}

class HomeController {
  @route("/")
  @middleware(() => true)
  static index() { 
    return "Hello, World!";
  }

  @route("/about")
  @middleware(() => false)
  static about() { 
    return "About us";
  }
}

console.log(routes); // { '/': { method: 'get', value: [Function: index] }, '/about': { method: 'get', value: [Function: about] } }

console.log(HomeController.index()); // Hello, World!

console.log(HomeController.about()); // error

上面的代码中，我们定义了route和middleware两个修饰器。其中，route用于定义路由，middleware用于定义中间件。

在HomeController中，我们分别使用了route和middleware两个修饰器，定义了两个路由：/和/about。/路由的中间件返回true，所以可以正常访问，而/about的中间件返回false，所以页面输出了一个错误信息。