大家好，今天我们来聊聊一个非常酷的JavaScript特性——装饰器。装饰器（Decorators）最早在Python和Java等语言中广受欢迎，而现在它也逐渐在JavaScript中得到应用。它能让我们的代码变得更加优雅和模块化。这篇文章将带你一步步了解什么是装饰器，并教你如何在项目中使用它们。

什么是装饰器？

简单来说，装饰器是一种特殊的函数，它可以用来修改类、方法、属性等的行为。通过装饰器，我们可以在不修改原始代码的情况下，添加额外的功能。装饰器通常在类定义前使用@符号来应用，就像给代码加上特殊的“装饰品”一样。

装饰器的基本语法

让我们从一个简单的装饰器函数开始：

function myDecorator(target) {
    // 给目标对象加个标记，表示它被装饰过了
    target.decorated = true;
}

这个示例中的myDecorator是一个简单的装饰器函数，它给目标添加了一个decorated属性，表示这个对象被装饰过了。

应用场景

装饰器的应用场景非常广泛，包括但不限于：

1. 日志记录：在方法调用前后记录日志。
2. 权限验证：在执行方法前检查用户权限。
3. 数据验证：在设置属性值时进行数据校验。

将装饰器应用于类

要将装饰器应用于类，可以在类定义前使用@符号。以下是一个简单的示例：

function addTimestamp(target) {
    // 给类的原型添加一个timestamp属性，初始化为当前时间
    target.prototype.timestamp = new Date();
}

@addTimestamp
class MyClass {}

const instance = new MyClass();
console.log(instance.timestamp); // 输出当前日期和时间

在这个示例中，addTimestamp装饰器为MyClass类添加了一个timestamp属性。当创建MyClass的实例时，该属性会被初始化为当前的日期和时间。

方法装饰器

方法装饰器可以修改类方法的行为。假设我们有一个需要记录方法调用情况的需求，可以这样实现：

function logMethod(target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;
    
    descriptor.value = function (...args) {
        console.log(`调用方法${propertyKey}，参数为:`, args);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class MyClass {
    @logMethod
    greet(name) {
        return `Hello, ${name}!`;
    }
}

const instance = new MyClass();
console.log(instance.greet('World')); 
// 输出:
// 调用方法greet，参数为: [ 'World' ]
// Hello, World!

在这个示例中，logMethod装饰器记录了方法调用时的参数，然后再调用原始方法。

访问器装饰器

访问器装饰器可以用来修改getter和setter的行为。假设我们希望每次获取某个属性值时，值都被转换为大写，可以这样实现：

function capitalize(target, propertyKey, descriptor) {
    const originalGetter = descriptor.get;
    descriptor.get = function () {
        const result = originalGetter.call(this);
        return result.toUpperCase();
    };
    return descriptor;
}

class Person {
    constructor(name) {
        this._name = name;
    }
    @capitalize
    get name() {
        return this._name;
    }
}

const person = new Person('john');
console.log(person.name); // 输出: JOHN

在这个示例中，capitalize装饰器修改了name属性的getter，使其返回大写的名字。

属性装饰器

属性装饰器可以用于添加元数据，但不能直接修改属性值。假设我们希望某个属性是只读的，可以这样实现：

function readOnly(target, propertyKey) {
    Object.defineProperty(target, propertyKey, {
        writable: false
    });
}

class Car {
    @readOnly
    make = 'Toyota';
}

const myCar = new Car();
console.log(myCar.make); // 输出: Toyota
myCar.make = 'Honda'; // 此操作将静默失败或在严格模式下抛出错误
console.log(myCar.make); // 仍输出: Toyota

在这个示例中，readOnly装饰器使make属性变为只读，因此任何修改该属性值的尝试都不会成功。

参数装饰器

参数装饰器可以用于为方法参数添加元数据。假设我们希望在方法调用时记录某个参数的值，可以这样实现：

function logParameter(target, propertyKey, parameterIndex) {
    const originalMethod = target[propertyKey];
    target[propertyKey] = function (...args) {
        console.log(`方法${propertyKey}的第${parameterIndex}个参数值为:`, args[parameterIndex]);
        return originalMethod.apply(this, args);
    };
}

class User {
    greet(@logParameter name) {
        return `Hello, ${name}!`;
    }
}

const user = new User();
console.log(user.greet('Alice')); 
// 输出:
// 方法greet的第0个参数值为: Alice
// Hello, Alice!

在这个示例中，logParameter装饰器记录了特定参数的值，每当调用该方法时都会执行此记录。

总结

装饰器是一种非常实用的工具，无论是日志记录、权限验证还是数据校验，它都能让我们的代码更优雅。随着装饰器在JavaScript中的广泛支持和标准化，它们将成为我们开发中的利器。