ES7 Decorator：应用范例（三）-JavaScript中文网-JavaScript教程资源分享门户

本文介绍 ES7 Decorator 的应用范例，主要涉及三个方面：类的方法装饰器、属性装饰器和参数装饰器。通过这些范例，我们可以更好地理解 ES7 Decorator 的概念和用法，并掌握如何在实际开发中使用它们。

类的方法装饰器

类的方法装饰器可以用来修改类的方法，比如添加一些前置或后置处理逻辑。下面是一个例子：

// javascriptcn.com 代码示例
function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with arguments: ${args}`);
    const result = original.apply(this, args);
    console.log(`Return value: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

const calculator = new Calculator();
const result = calculator.add(1, 2);
console.log(`Result: ${result}`);

在上面的例子中，我们定义了一个名为 log 的方法装饰器，它会在类的方法被调用时输出一些日志信息。我们将 log 装饰器应用到了 Calculator 类的 add 方法上，这样每次调用 add 方法时都会输出日志信息。

输出结果如下：

Calling add with arguments: 1,2
Return value: 3
Result: 3

可以看到，当我们调用 add 方法时，会先输出一条日志信息，然后执行原始的 add 方法，最后再输出一条日志信息。

属性装饰器

属性装饰器可以用来修改类的属性，比如添加一些验证或计算逻辑。下面是一个例子：

// javascriptcn.com 代码示例
function format(target, name) {
  let value = target[name];
  const getter = function() {
    return value;
  };
  const setter = function(newValue) {
    value = newValue.toFixed(2);
  };
  Object.defineProperty(target, name, {
    get: getter,
    set: setter
  });
}

class Product {
  @format
  price = 0;
}

const product = new Product();
product.price = 10.1234;
console.log(`Price: ${product.price}`);

在上面的例子中，我们定义了一个名为 format 的属性装饰器，它会将类的属性值格式化为小数点后两位。我们将 format 装饰器应用到了 Product 类的 price 属性上，这样每次给 price 属性赋值时都会自动格式化。

输出结果如下：

Price: 10.12

可以看到，当我们给 price 属性赋值时，它会自动格式化为小数点后两位。

参数装饰器

参数装饰器可以用来修改类的方法参数，比如添加一些验证或计算逻辑。下面是一个例子：

// javascriptcn.com 代码示例
function range(min, max) {
  return function(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args) {
      for (let i = 0; i < args.length; i++) {
        if (args[i] < min || args[i] > max) {
          throw new Error(`Argument ${i} out of range [${min}, ${max}]`);
        }
      }
      return original.apply(this, args);
    };
    return descriptor;
  };
}

class Calculator {
  @range(0, 100)
  add(a, b) {
    return a + b;
  }
}

const calculator = new Calculator();
const result = calculator.add(101, 2);
console.log(`Result: ${result}`);

在上面的例子中，我们定义了一个名为 range 的参数装饰器，它会验证类的方法参数是否在指定的范围内。我们将 range 装饰器应用到了 Calculator 类的 add 方法的两个参数上，这样每次调用 add 方法时都会自动验证参数范围。

输出结果如下：

Error: Argument 0 out of range [0, 100]

可以看到，当我们调用 add 方法时，如果参数超出了指定的范围，就会抛出一个错误。

总结

本文介绍了 ES7 Decorator 的三个应用范例：类的方法装饰器、属性装饰器和参数装饰器。通过这些范例，我们可以更好地理解 ES7 Decorator 的概念和用法，并掌握如何在实际开发中使用它们。希望本文能对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655c02bbd2f5e1655d61341f