在JavaScript的世界里，有一个神秘而强大的工具——装饰器，它如同魔法一般，能够让你轻松地给类、方法、属性或访问器添加额外的功能，而无需修改其原有的代码。想象一下，当你需要为一个类添加日志记录、权限验证、自动绑定this或是性能监控等功能时，装饰器就能大显身手，让你的代码更加简洁、易读和高效。

一、装饰器的基本语法与实例

想要使用装饰器，首先得了解它的基本语法。在JavaScript中，我们使用@符号来紧跟在目标对象、属性名或属性描述符之前，后面再跟上装饰器的名称。下面是一个简单的类装饰器示例：

function myDecorator(target) {
    // 对目标类进行修改
    target.prototype.newProperty = 'This is a new property added by decorator';
    return target;
}

@myDecorator
class MyClass {
    constructor() {}
}

const instance = new MyClass();
console.log(instance.newProperty); // 输出: This is a new property added by decorator

在这个例子中，myDecorator就是一个装饰器函数，它接收一个目标类作为参数，并在该类的原型上添加了一个名为newProperty的新属性。

二、装饰器的广泛应用场景

1. 日志记录

想要在方法执行前后记录日志？装饰器就能轻松实现这一需求：

function logMethod(target, name, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args) {
        console.log(`Calling method ${name} with arguments:`, 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 result = calculator.add(2, 3);

2. 权限验证

在执行方法前进行权限验证，确保只有具备相应权限的用户才能调用某些方法：

function checkPermission(requiredRole) {
    return function (target, name, descriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args) {
            const userRole = this.userRole; // 假设 this 上有 userRole 属性

            if (userRole === requiredRole) {
                return originalMethod.apply(this, args);
            } else {
                console.log('You do not have permission to call this method.');
            }
        };

        return descriptor;
    };
}

class UserService {
    userRole = 'admin';

    @checkPermission('admin')
    deleteUser() {
        console.log('User deleted.');
    }
}

const userService = new UserService();
userService.deleteUser();

3. 自动绑定this

在JavaScript中，类方法的this指向可能会出现问题。使用装饰器可以自动绑定this：

function autobind(target, name, descriptor) {
    const originalMethod = descriptor.value;

    return {
        configurable: true,
        get() {
            const boundMethod = originalMethod.bind(this);
            Object.defineProperty(this, name, { value: boundMethod, configurable: true, writable: true });
            return boundMethod;
        }
    };
}

class Button {
    constructor() {
        this.text = 'Click me';
    }

    @autobind
    handleClick() {
        console.log(`Button text: ${this.text}`);
    }
}

const button = new Button();
const clickHandler = button.handleClick;
clickHandler(); // Button text: Click me

4. 性能监控

想要监控方法的执行时间，帮助分析性能瓶颈？装饰器同样能轻松实现这一目标：

function performanceMonitor(target, name, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = async function (...args) {
        const start = performance.now();
        const result = await originalMethod.apply(this, args);
        const end = performance.now();
        console.log(`Method ${name} took ${end - start} milliseconds to execute.`);
        return result;
    };

    return descriptor;
}

class DataFetcher {
    @performanceMonitor
    async fetchData() {
        // 模拟异步数据获取
        await new Promise(resolve => setTimeout(resolve, 1000));
        return { data: 'Some data' };
    }
}

const fetcher = new DataFetcher();
fetcher.fetchData(); // Method fetchData took 1000 milliseconds to execute.

总之，装饰器为JavaScript开发者提供了一种简洁而强大的方式来修改类和其成员的行为。它不仅能够提高代码的可维护性和复用性，还能让你的代码更加简洁、易读和高效。