JS 装饰器模式 (`@decorator`)：函数与类的扩展与元编程

各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里一个既神秘又实用的家伙：装饰器（Decorators），也就是那些带着 @ 符号的小玩意儿。别怕，虽然听起来像某种仪式魔法，但其实它们是扩展函数和类功能的利器，也是元编程的一种体现。

开场白：别把装饰器想成魔法，它更像积木！

很多人一听到“元编程”就觉得高深莫测。别慌，其实元编程说白了就是“编写能够操作代码的代码”。而装饰器，就是一种让我们可以更优雅地操作和修改函数或类的语法糖。我们可以把装饰器想象成乐高积木，可以用来给函数或者类添砖加瓦，增加新的功能，而不需要直接修改它们的代码。

第一幕：什么是装饰器？（理论基础）

简单来说，装饰器就是一个函数，它可以接收另一个函数或类作为参数，然后返回一个新的函数或类（通常是经过修改的）。它的本质就是个高阶函数，只不过通过 @ 语法糖，让代码看起来更简洁、更易读。

目标（Target）： 装饰器作用的对象，可以是函数、类、方法、属性等。
装饰器函数（Decorator Function）： 实际执行装饰逻辑的函数。它接收目标作为参数，并返回一个新的目标（通常是增强后的）。
元数据（Metadata）： 关于数据的数据。装饰器可以利用元数据来记录和修改目标的行为。

第二幕：函数装饰器（给函数加Buff）

咱们先从函数装饰器开始，因为它更容易理解。假设我们有一个简单的函数：

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

现在，我们想给这个函数加上一个“日志记录”的功能，每次调用 sayHello 的时候，都先打印一条日志。如果不用装饰器，我们可以这样做：

function logDecorator(func) {
  return function(...args) {
    console.log('Calling function:', func.name);
    const result = func(...args);
    console.log('Function returned:', result);
    return result;
  };
}

const sayHelloWithLog = logDecorator(sayHello);
sayHelloWithLog('Alice');

这段代码虽然能实现功能，但是有点冗长，而且需要创建一个新的变量 sayHelloWithLog。有了装饰器，我们可以更优雅地实现这个功能：

function logDecorator(func) {
  return function(...args) {
    console.log('Calling function:', func.name);
    const result = func(...args);
    console.log('Function returned:', result);
    return result;
  };
}

@logDecorator
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

sayHello('Bob');

看到了吗？我们用 @logDecorator 装饰了 sayHello 函数，这样每次调用 sayHello 的时候，都会先执行 logDecorator 里的逻辑。

核心： 装饰器 @logDecorator 相当于 sayHello = logDecorator(sayHello)。

更进一步：带参数的装饰器

有时候，我们可能需要让装饰器接收一些参数，以便更灵活地控制它的行为。比如，我们想让 logDecorator 可以指定日志的级别：

function logDecorator(level) {
  return function(func) {
    return function(...args) {
      console.log(`[${level}] Calling function:`, func.name);
      const result = func(...args);
      console.log(`[${level}] Function returned:`, result);
      return result;
    };
  };
}

@logDecorator('INFO')
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

sayHello('Charlie');

注意，带参数的装饰器实际上是一个返回装饰器函数的函数。

第三幕：类装饰器（给类加特性）

类装饰器可以用来修改类的行为，比如添加新的方法、修改类的属性等。假设我们有一个 Person 类：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

现在，我们想给这个类添加一个 greet 方法，可以用类装饰器来实现：

function addGreetMethod(constructor) {
  constructor.prototype.greet = function() {
    console.log(`Hello, I'm ${this.name}!`);
  };
}

@addGreetMethod
class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

const person = new Person('David');
person.greet();

核心： 类装饰器接收类的构造函数作为参数，并修改它的 prototype 属性，从而添加新的方法。

第四幕：方法装饰器（给方法动手术）

方法装饰器可以用来修改类的方法的行为。比如，我们想给 Person 类的 sayName 方法加上一个验证逻辑，确保 name 属性不为空：

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

  descriptor.value = function(...args) {
    if (!this.name) {
      console.warn('Name is empty!');
      return;
    }
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Person {
  constructor(name) {
    this.name = name;
  }

  @validateName
  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

const person1 = new Person('Eve');
person1.sayName(); // 输出 "My name is Eve"

const person2 = new Person('');
person2.sayName(); // 输出 "Name is empty!"

方法装饰器的三个参数：

target: 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。
propertyKey: 方法的名字。
descriptor: 属性描述符，包含了方法的各种信息，比如 value (方法本身)、writable、enumerable、configurable。

第五幕：属性装饰器（给属性加约束）

属性装饰器可以用来修改类的属性的行为。比如，我们想给 Person 类的 name 属性加上一个验证逻辑，确保 name 属性的长度不超过 10 个字符：

function maxLength(limit) {
  return function(target, propertyKey) {
    let value;

    Object.defineProperty(target, propertyKey, {
      get: function() {
        return value;
      },
      set: function(newValue) {
        if (newValue.length > limit) {
          console.warn(`Name is too long! Max length is ${limit}`);
          return;
        }
        value = newValue;
      },
      enumerable: true,
      configurable: true
    });
  };
}

class Person {
  @maxLength(10)
  name;

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

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

const person1 = new Person('Grace');
person1.name = 'ThisIsAVeryLongName'; // 输出 "Name is too long! Max length is 10"
person1.sayName(); // 输出 "My name is Grace"

属性装饰器的两个参数：

target: 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。
propertyKey: 属性的名字。

第六幕：装饰器的应用场景（实战演练）

装饰器在实际开发中有很多应用场景，这里列举一些常见的：

日志记录： 记录函数的调用信息、执行时间等。
性能分析： 测量函数的执行时间，找出性能瓶颈。
权限验证： 验证用户是否有权限访问某个函数或方法。
缓存： 缓存函数的计算结果，避免重复计算。
依赖注入： 将依赖注入到类中。
数据验证： 验证数据的格式是否正确。
路由定义： 在框架中定义路由。
状态管理： 在状态管理库中管理状态。

举个例子：权限验证

假设我们有一个需要管理员权限才能访问的函数：

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

  descriptor.value = function(...args) {
    const user = getCurrentUser(); // 假设这个函数可以获取当前用户

    if (!user || user.role !== 'admin') {
      console.warn('You do not have permission to access this function.');
      return;
    }

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

  return descriptor;
}

class AdminPanel {
  @adminOnly
  deleteUser(userId) {
    console.log(`Deleting user with ID: ${userId}`);
  }
}

const panel = new AdminPanel();
panel.deleteUser(123); // 如果当前用户是管理员，则删除用户；否则，输出警告信息

第七幕：装饰器的注意事项（避坑指南）

需要编译器支持： 装饰器是 ES7 的提案，目前还没有被所有浏览器原生支持。你需要使用 Babel 等编译器将代码转换成 ES5 或 ES6 才能在浏览器中运行。
执行顺序： 多个装饰器按照从下到上的顺序依次执行。
元数据： 可以使用 reflect-metadata 库来存储和读取元数据。这个库可以让你在装饰器中存储一些额外的信息，方便后续使用。
类型检查： 在使用 TypeScript 的时候，可以更好地利用装饰器进行类型检查，提高代码的健壮性。
过度使用： 不要滥用装饰器。如果一个函数或类只需要简单的修改，直接修改代码可能更简单。

第八幕：装饰器的未来（展望）

虽然装饰器目前还只是一个提案，但它已经得到了广泛的应用，并且在未来的 JavaScript 开发中将会扮演更重要的角色。随着 JavaScript 语言的不断发展，装饰器将会变得更加强大和灵活，为我们提供更多的可能性。

总结：装饰器，让代码更优雅！

装饰器是一种强大的元编程技术，它可以让我们更优雅地扩展函数和类的功能。虽然它有一些学习成本，但是掌握了装饰器之后，你的代码将会变得更加简洁、易读、易维护。所以，赶紧学起来吧！

代码示例表格

装饰器类型	示例代码	说明
函数装饰器	javascript function logDecorator(func) { return function(...args) { console.log('Calling function:', func.name); const result = func(...args); console.log('Function returned:', result); return result; }; } @logDecorator function sayHello(name) { console.log(`Hello, ${name}!`); } sayHello('Bob');	给函数添加日志记录功能。
带参数的函数装饰器	javascript function logDecorator(level) { return function(func) { return function(...args) { console.log(`[${level}] Calling function:`, func.name); const result = func(...args); console.log(`[${level}] Function returned:`, result); return result; }; }; } @logDecorator('INFO') function sayHello(name) { console.log(`Hello, ${name}!`); } sayHello('Charlie');	给函数添加带日志级别的日志记录功能。
类装饰器	javascript function addGreetMethod(constructor) { constructor.prototype.greet = function() { console.log(`Hello, I'm ${this.name}!`); }; } @addGreetMethod class Person { constructor(name) { this.name = name; } sayName() { console.log(`My name is ${this.name}`); } } const person = new Person('David'); person.greet();	给类添加新的方法。
方法装饰器	javascript function validateName(target, propertyKey, descriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args) { if (!this.name) { console.warn('Name is empty!'); return; } return originalMethod.apply(this, args); }; return descriptor; } class Person { constructor(name) { this.name = name; } @validateName sayName() { console.log(`My name is ${this.name}`); } } const person1 = new Person('Eve'); person1.sayName(); const person2 = new Person(''); person2.sayName();	给方法添加验证逻辑。
属性装饰器	javascript function maxLength(limit) { return function(target, propertyKey) { let value; Object.defineProperty(target, propertyKey, { get: function() { return value; }, set: function(newValue) { if (newValue.length > limit) { console.warn(`Name is too long! Max length is ${limit}`); return; } value = newValue; }, enumerable: true, configurable: true }); }; } class Person { @maxLength(10) name; constructor(name) { this.name = name; } sayName() { console.log(`My name is ${this.name}`); } } const person1 = new Person('Grace'); person1.name = 'ThisIsAVeryLongName'; person1.sayName();	给属性添加长度限制。

收工！

希望这次的讲座能够帮助你理解 JavaScript 装饰器。记住，实践是检验真理的唯一标准，多写代码，多尝试，你就能真正掌握它们。下次再见！

发表回复 取消回复

发表回复取消回复