JS 装饰器的艺术

2023-10-19 11:44:41

探索 JavaScript 装饰器的强大功能

前言

在软件开发的广阔世界中，装饰器已成为增强代码可重用性、可扩展性和可测试性的强大工具。在这篇文章中，我们将深入探讨 JavaScript 装饰器的妙用，并指导如何在 TypeScript 中有效使用它们。

什么是装饰器？

简单来说，装饰器是一个函数，它可以修改类、方法、属性或参数的行为。通过使用 @ 符号，可以在目标元素之前应用装饰器。以下是一个简单的示例：

// 装饰器函数
function log(target) {
  target.prototype.log = function() {
    console.log(this);
  };
}

// 使用装饰器
@log
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

// 创建对象并调用日志方法
const myObject = new MyClass('John');
myObject.log(); // { name: 'John' }

在上面的示例中，log 装饰器向 MyClass 添加了一个 log 方法，用于打印当前对象的状态。

装饰器的优点

装饰器提供了众多优点，包括：

代码重用： 通过将代码逻辑封装在装饰器中，可以轻松地在多个类或方法中重用它。
可扩展性： 装饰器允许在不修改现有代码的情况下扩展类的功能。
可测试性： 装饰器使测试代码变得更容易，因为它可以模拟方法调用或注入依赖项。

在 TypeScript 中使用装饰器

TypeScript 完全支持装饰器。要使用装饰器，只需使用 @ 符号在目标元素之前应用它们。例如：

// 装饰器函数
function log(target) {
  target.prototype.log = function() {
    console.log(this);
  };
}

// 使用装饰器
@log
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

代码示例

以下是一些在 TypeScript 中使用装饰器的代码示例：

1. 日志记录装饰器：

function log(target) {
  target.prototype.log = function() {
    console.log(this);
  };
}

@log
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

// 调用日志方法
const myObject = new MyClass('John');
myObject.log(); // { name: 'John' }

2. 缓存装饰器：

function cache(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function() {
    const cachedResult = this.cache[propertyKey];

    if (cachedResult) {
      return cachedResult;
    }

    const result = originalMethod.apply(this, arguments);
    this.cache[propertyKey] = result;

    return result;
  };
}

class MyClass {
  constructor() {
    this.cache = {};
  }

  @cache
  getSomething() {
    return Math.random();
  }
}

// 重复调用 getSomething 方法
const myObject = new MyClass();
console.log(myObject.getSomething()); // 0.45678
console.log(myObject.getSomething()); // 0.45678 (来自缓存)