一、引言

在 JavaScript 里，装饰器是一项强大且实用的特性，它能在不修改原有代码结构的基础上，为类、方法或属性添加额外的功能。装饰器可以提升代码的复用性、可维护性和可读性，是现代 JavaScript 开发中一个值得深入学习的工具。

二、JavaScript 版本要求

装饰器目前属于 ECMAScript 提案中的特性，并非 JavaScript 标准的一部分，但在许多环境中可以借助 Babel 或 TypeScript 来使用。

传统环境

• Babel：需要安装 @babel/plugin-proposal-decorators 插件，并在 Babel 配置文件中启用它。例如在 .babelrc 文件里添加如下配置：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-01" }]
  ]
}

• TypeScript：从 TypeScript 1.5 版本开始支持装饰器，需要在 tsconfig.json 中设置 "experimentalDecorators": true。

现代环境

随着 JavaScript 的不断发展，装饰器有望成为标准特性。截至 2024 年，装饰器提案处于 Stage 3，意味着离正式纳入标准已经不远。

三、基本使用教程

3.1 类装饰器

类装饰器是最常见的装饰器类型，它可以修改类的定义。类装饰器本质上是一个函数，接收一个类作为参数，并返回一个新的类或者修改原有的类。

function logClass(constructor) {
    console.log(`Class ${constructor.name} is defined.`);
    return constructor;
}

@logClass
class MyClass {
    constructor() {
        console.log('MyClass instance created.');
    }
}

const instance = new MyClass();

在上述代码中，logClass 是一个类装饰器，它接收 MyClass 作为参数，并在控制台输出类的定义信息，最后返回原类。

3.2 方法装饰器

方法装饰器用于修改类的方法。它接收三个参数：目标对象、方法名和属性描述符。

function logMethod(target, name, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`Calling method ${name} with args: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        console.log(`Method ${name} returned: ${result}`);
        return result;
    };
    return descriptor;
}

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

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

这里的 logMethod 是一个方法装饰器，它会在方法调用前后输出日志信息。

3.3 属性装饰器

属性装饰器用于修改类的属性。它接收两个参数：目标对象和属性名。

function readonly(target, name) {
    const descriptor = Object.getOwnPropertyDescriptor(target, name) || {};
    descriptor.writable = false;
    Object.defineProperty(target, name, descriptor);
}

class Example {
    @readonly
    property = 'value';
}

const example = new Example();
// 尝试修改只读属性会失败
example.property = 'new value'; 
console.log(example.property); 

readonly 装饰器将类的属性设置为只读。

四、进阶高级使用教程

4.1 装饰器工厂

装饰器工厂是一个返回装饰器的函数，这样可以让装饰器接收参数。

function logWithPrefix(prefix) {
    return function logClass(constructor) {
        console.log(`${prefix}: Class ${constructor.name} is defined.`);
        return constructor;
    };
}

@logWithPrefix('Custom Prefix')
class AnotherClass {
    constructor() {
        console.log('AnotherClass instance created.');
    }
}

在这个例子中，logWithPrefix 是一个装饰器工厂，它接收一个前缀参数，并返回一个类装饰器。

4.2 多个装饰器叠加

可以将多个装饰器叠加使用，它们的执行顺序是从下往上。

function firstDecorator(constructor) {
    console.log('First decorator executed.');
    return constructor;
}

function secondDecorator(constructor) {
    console.log('Second decorator executed.');
    return constructor;
}

@firstDecorator
@secondDecorator
class MultipleDecoratorsClass {
    constructor() {
        console.log('MultipleDecoratorsClass instance created.');
    }
}

在这个例子中，先执行 secondDecorator，再执行 firstDecorator。

4.3 装饰器组合

可以将多个装饰器组合成一个新的装饰器。

function combineDecorators(...decorators) {
    return function (target) {
        return decorators.reduceRight((acc, decorator) => decorator(acc), target);
    };
}

function decoratorA(constructor) {
    console.log('Decorator A executed.');
    return constructor;
}

function decoratorB(constructor) {
    console.log('Decorator B executed.');
    return constructor;
}

const combinedDecorator = combineDecorators(decoratorA, decoratorB);

@combinedDecorator
class CombinedClass {
    constructor() {
        console.log('CombinedClass instance created.');
    }
}

combineDecorators 函数将多个装饰器组合成一个新的装饰器，方便复用。

五、使用中的小技巧

5.1 保存原方法引用

在方法装饰器中，保存原方法的引用很重要，这样可以在修改后的方法中调用原方法。

function wrapMethod(target, name, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args) {
        console.log('Before method call');
        const result = originalMethod.apply(this, args);
        console.log('After method call');
        return result;
    };
    return descriptor;
}

5.2 利用闭包传递参数

在装饰器工厂中，可以利用闭包来传递参数给装饰器。

function withOptions(options) {
    return function (target) {
        // 使用 options 进行操作
        console.log('Options:', options);
        return target;
    };
}

@withOptions({ message: 'Custom message' })
class ClassWithOptions {
    constructor() {
        console.log('ClassWithOptions instance created.');
    }
}

六、可能遇到的问题及解决方案

6.1 装饰器顺序问题

问题：多个装饰器叠加时，执行顺序可能不符合预期。
解决方案：记住装饰器的执行顺序是从下往上，根据需要调整装饰器的顺序。

6.2 兼容性问题

问题：装饰器目前不是 JavaScript 标准特性，在一些环境中可能无法直接使用。
解决方案：使用 Babel 或 TypeScript 来支持装饰器，或者等待装饰器成为标准特性后再使用。

6.3 装饰器修改类的原型链问题

问题：装饰器修改类的原型链可能会导致意外的行为。
解决方案：在修改类的原型链时要谨慎，确保不会影响其他部分的代码。可以通过创建新的类来避免直接修改原类的原型链。

七、总结

JavaScript 装饰器是一个强大的工具，它可以帮助开发者更灵活地扩展和修改类、方法和属性。通过掌握装饰器的基本使用、进阶技巧以及解决可能遇到的问题，开发者可以编写出更加高效、可维护的代码。随着装饰器标准的不断推进，相信它会在未来的 JavaScript 开发中发挥更大的作用。