JavaScript装饰器秘籍：解锁隐藏力量，一览5个惊艳技巧

前端

2023-02-26 13:30:13

探索装饰器的魅力：让你的 JavaScript 代码更加灵活强大

在 JavaScript 的世界里，装饰器就像是一把神奇的瑞士军刀，赋予我们不可思议的力量来改变类和函数的行为，而无需修改它们的源代码。这个强大的工具为我们打开了无限的可能性，让我们的代码更加灵活、强大和易于维护。

什么是装饰器？

装饰器本质上是函数，它们接受一个目标类或函数作为参数，并返回一个修改后的版本。通过这种方式，我们可以动态地增强或修改现有代码的行为，而无需直接修改它们。

5 个让你眼前一亮的装饰器技巧

装饰器在 JavaScript 中的应用极其广泛。以下是五个令人印象深刻的技巧，可以让你充分利用它们的潜力：

1. 装饰函数参数

装饰器可以用来检查和修改函数的参数。这对于参数验证、类型转换和日志记录等任务非常有用。例如，我们可以确保函数的参数在给定范围内，或者将字符串参数转换为数字。

// 验证函数参数是否在指定范围内
function validateNumber(min, max) {
  return function(target, propertyKey, parameterIndex) {
    const originalMethod = target[propertyKey];

    target[propertyKey] = function(...args) {
      if (args[parameterIndex] < min || args[parameterIndex] > max) {
        throw new Error(`Parameter ${parameterIndex} must be between ${min} and ${max}`);
      }

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

// 使用装饰器来验证函数参数
@validateNumber(1, 10)
function sum(a, b) {
  return a + b;
}

// 尝试传递超出范围的参数
try {
  sum(11, 2);
} catch (error) {
  console.error(error.message); // Parameter 0 must be between 1 and 10
}

2. 装饰类属性

装饰器还可以用来修改类属性。我们可以用它来进行属性验证、类型转换或日志记录。例如，我们可以确保属性是只读的，或者将数字属性转换为字符串。

// 将属性标记为只读
function readonly(target, propertyKey) {
  const originalValue = target[propertyKey];

  Object.defineProperty(target, propertyKey, {
    get: function() {
      return originalValue;
    },
    set: function(newValue) {
      throw new Error(`Property ${propertyKey} is readonly`);
    },
  });
}

// 使用装饰器来创建只读属性
class MyClass {
  @readonly
  name = "John Doe";
}

// 尝试修改只读属性
const myClass = new MyClass();

try {
  myClass.name = "Jane Doe";
} catch (error) {
  console.error(error.message); // Property name is readonly
}

3. 装饰函数返回值

装饰器还允许我们修改函数的返回值。这对于返回值验证、类型转换或日志记录非常有用。例如，我们可以确保函数返回一个特定的类型，或者在控制台中记录返回值。

// 记录函数的返回值
function logReturnValue(target, propertyKey) {
  const originalMethod = target[propertyKey];

  target[propertyKey] = function(...args) {
    const result = originalMethod.apply(this, args);

    console.log(`Function ${propertyKey} returned ${result}`);

    return result;
  };
}

// 使用装饰器来记录函数的返回值
class MyClass {
  @logReturnValue
  sum(a, b) {
    return a + b;
  }
}

// 调用函数并记录返回值
const myClass = new MyClass();

myClass.sum(1, 2); // Function sum returned 3

4. 装饰函数调用

装饰器甚至可以用来在函数调用之前或之后执行额外的代码。这对于性能监控、日志记录或权限控制等任务非常有用。例如，我们可以衡量函数的执行时间，或者在调用函数之前检查用户的权限。

// 监控函数的执行时间
function performanceMonitor(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    const startTime = performance.now();

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

    const endTime = performance.now();

    console.log(`Function ${propertyKey} took ${endTime - startTime} milliseconds to execute`);

    return result;
  };
}

// 使用装饰器来监控函数的执行时间
class MyClass {
  @performanceMonitor
  sum(a, b) {
    return a + b;
  }
}

// 调用函数并监控其执行时间
const myClass = new MyClass();

myClass.sum(1, 2); // Function sum took 0.001 milliseconds to execute

5. 组合装饰器

装饰器的强大之处还在于它们可以组合起来使用。通过组合多个装饰器，我们可以实现更加复杂的功能。例如，我们可以组合参数验证装饰器和返回值日志记录装饰器，以创建一个既能验证参数又能记录返回值的装饰器。

// 组合装饰器来验证参数并记录返回值
function validateAndLogSum(min, max) {
  return validateNumber(min, max)(logReturnValue);
}

// 使用组合装饰器
class MyClass {
  @validateAndLogSum(1, 10)
  sum(a, b) {
    return a + b;
  }
}

// 调用函数并验证参数和记录返回值
const myClass = new MyClass();

myClass.sum(5, 5); // Function sum returned 10