207 - 装饰器 - 装饰器概念 - 装饰器的语法与原理

装饰器 - 装饰器概念 - 装饰器的语法与原理

一、引言

在前端开发中，JavaScript 不断发展，新的特性和语法层出不穷。装饰器（Decorators）就是其中一个非常强大且实用的特性，它能够在不修改原有代码结构的前提下，对类、方法、属性等进行增强和扩展。装饰器就像是给代码穿上了一件“魔法外衣”，让代码具备更多的功能和更好的可读性。

二、装饰器的概念

2.1 定义

装饰器是一种特殊的声明，它可以被附加到类声明、方法、属性或参数上，用来修改类的行为。简单来说，装饰器是一个函数，它接收目标对象作为参数，并返回一个新的对象或者对原对象进行修改。

2.2 应用场景

• 日志记录：在方法执行前后记录日志，方便调试和监控。
• 权限验证：在调用某些方法之前，验证用户是否具备相应的权限。
• 性能监控：统计方法的执行时间，分析性能瓶颈。

三、装饰器的语法

3.1 基本语法

装饰器是一个函数，它可以使用 @ 符号应用到类、方法、属性等上面。下面是一个简单的装饰器示例：

// 定义一个装饰器函数
function log(target, name, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`调用方法 ${name}，参数：`, args);
        const result = originalMethod.apply(this, args);
        console.log(`方法 ${name} 执行完毕，结果：`, result);
        return result;
    };
    return descriptor;
}
class Calculator {
    @log
    add(a, b) {
        return a + b;
    }
}
const calc = new Calculator();
calc.add(2, 3);

3.2 不同类型的装饰器

3.2.1 类装饰器

类装饰器应用于类构造函数，可以用来监视、修改或替换类定义。

function classDecorator(constructor) {
    return class extends constructor {
        newProperty = '新属性';
        hello() {
            return 'Hello from decorated class';
        }
    };
}
@classDecorator
class MyClass {
    constructor() {
        this.message = '原始类';
    }
}
const instance = new MyClass();
console.log(instance.newProperty); 
console.log(instance.hello());

3.2.2 方法装饰器

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

function methodDecorator(target, name, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function () {
        console.log(`调用方法 ${name}`);
        return originalMethod.apply(this, arguments);
    };
    return descriptor;
}
class MyClass {
    @methodDecorator
    myMethod() {
        console.log('执行方法');
    }
}
const obj = new MyClass();
obj.myMethod();

3.2.3 属性装饰器

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

function propertyDecorator(target, propertyKey) {
    let value = target[propertyKey];
    const getter = () => {
        console.log(`获取属性 ${propertyKey}`);
        return value;
    };
    const setter = (newValue) => {
        console.log(`设置属性 ${propertyKey} 为 ${newValue}`);
        value = newValue;
    };
    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}
class MyClass {
    @propertyDecorator
    myProperty = '初始值';
}
const obj = new MyClass();
console.log(obj.myProperty); 
obj.myProperty = '新值';

四、装饰器的原理

装饰器的本质是一个函数，它的执行过程如下：

1. 接收参数：根据装饰器的类型，接收不同的参数。例如，类装饰器接收构造函数作为参数，方法装饰器接收目标对象、方法名和属性描述符作为参数。
2. 修改或替换目标对象：在装饰器函数内部，可以对目标对象进行修改或替换。例如，在方法装饰器中，可以修改方法的实现，添加额外的逻辑。
3. 返回修改后的对象：装饰器函数最后需要返回修改后的对象，这样才能应用到原有的类、方法或属性上。

五、总结

装饰器是 JavaScript 中一个非常强大的特性，它可以帮助我们编写更加模块化、可维护和可扩展的代码。通过合理使用装饰器，我们可以在不修改原有代码的基础上，为代码添加额外的功能，提高开发效率。虽然装饰器目前还处于提案阶段，但在许多现代 JavaScript 框架中已经得到了广泛的应用。