ES7 之 decorator 装饰器模式详解

在 JavaScript 中，装饰器模式是一种基于类的设计模式，可以修改类的行为。ES7 引入了修饰器（Decorator）提案，它可以让我们更加方便地实现装饰器模式。

什么是装饰器模式

装饰器模式是一种结构型模式，它通过动态地为对象添加新的行为来扩展其功能。在这种模式中，我们可以通过将类或对象作为参数，然后返回修改后的类或对象来实现装饰器的目的。

在 JavaScript 中，装饰器模式常常用于修改类的行为，比如为类添加属性或方法。它可以有效地避免子类化的复杂性，让我们更加灵活地扩展类的功能。

使用修饰器实现装饰器模式

修饰器是一种特殊的函数，它可以用来修改类的行为。我们可以使用 @ 符号来引用修饰器，将修饰器应用于类、方法、属性等成员上。

下面是一个使用修饰器实现装饰器模式的示例：

function log(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Calling ${name} with ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  };
  return descriptor;
}

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

const calculator = new Calculator();
calculator.add(1, 2);

在上面的例子中，我们定义了一个修饰器 log，它可以记录方法的调用和返回值。接着，我们使用 @log 将修饰器应用到 add 方法上。最后，我们创建了一个新的 Calculator 对象，并调用它的 add 方法。当我们调用 add 方法时，它会在控制台输出调用参数和返回值：

Calling add with 1,2
Result: 3

使用装饰器简化函数调用

装饰器模式不仅可以用来添加一些新的功能，还可以用来简化函数的调用。我们可以使用修饰器来将多个参数转换为一个数组，然后再传递给函数。

下面是一个使用修饰器简化函数调用的示例：

function toArray(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    if (Array.isArray(args[0])) {
      return originalMethod.apply(this, args[0]);
    }
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class MyMath {
  @toArray
  sum(numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
  }
}

const myMath = new MyMath();
console.log(myMath.sum(1, 2, 3, 4, 5)); // 15
console.log(myMath.sum([1, 2, 3, 4, 5])); // 15

在上面的例子中，我们定义了一个修饰器 toArray，它可以将函数的参数转换为一个数组。接着，我们使用 @toArray 将修饰器应用到 sum 方法上。最后，我们创建了一个新的 MyMath 对象，并调用它的 sum 方法。当我们传递一个数组作为参数时，它会将数组展开为多个参数，否则将参数转换为数组。

总结

装饰器模式是一种非常实用的设计模式，可以帮助我们更加灵活地扩展对象的功能。ECMAScript 修饰器提案为 JavaScript 开发者提供了一种方便的实现装饰器模式的方式。我们可以使用修饰器来添加新的属性、方法或行为，也可以使用它来简化函数的调用。希望这篇文章能够帮助你更好地理解装饰器模式的相关概念和实现。

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