JavaScript 中 Decorator 的用法？

推荐答案

-- -------------------- ---- -------
-- --------------
-------- ----------- ----- ----------- -
    ----- -------------- - -----------------

    ---------------- - ----------------- -
        -------------------- ------- ------ ------
        ----- ------ - -------------------------- ------
        ------------------- -- ---------- --------
        ------ -------
    --

    ------ -----------
-

----- ---------- -
    ----
    ------ -- -
        ------ - - --
    -
-

----- ---- - --- -------------
----------- --- -- --- ------- --- ---- --- -- - ------ -- ---- -

本题详细解读

什么是装饰器（Decorator）？

装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 的形式，其中 expression 是一个函数，它会在运行时被调用，并传入被装饰的目标对象的相关信息。

装饰器的基本语法

装饰器的基本语法如下：

@decorator
class MyClass { }

// 或者
class MyClass {
    @decorator
    method() { }
}

装饰器的类型

1. 类装饰器：应用于类构造函数，可以用来观察、修改或替换类定义。
2. 方法装饰器：应用于类的方法，可以用来修改方法的行为。
3. 访问器装饰器：应用于类的访问器（getter/setter）。
4. 属性装饰器：应用于类的属性。
5. 参数装饰器：应用于类方法的参数。

装饰器的参数

装饰器函数接收三个参数：

• target：被装饰的目标对象（类、方法、属性等）。
• name：被装饰的目标的名称（方法名、属性名等）。
• descriptor：描述符对象（对于方法和访问器装饰器）。

装饰器的返回值

装饰器函数可以返回一个新的描述符对象，或者直接修改传入的描述符对象。如果返回 undefined，则使用默认的描述符。

示例解析

在上面的示例中，log 装饰器被应用于 Calculator 类的 add 方法。装饰器函数 log 接收三个参数：

• target：Calculator 类的原型。
• name：方法名 "add"。
• descriptor：add 方法的描述符对象。

装饰器函数内部，我们保存了原始方法的引用，然后重写了 descriptor.value，在调用原始方法之前和之后分别打印日志。最后返回修改后的描述符对象。

使用场景

装饰器常用于以下场景：

• 日志记录
• 性能监控
• 权限控制
• 数据验证
• 缓存处理

注意事项

• 装饰器目前是 ECMAScript 的提案，尚未正式成为标准，但在 TypeScript 和 Babel 中已经得到支持。
• 装饰器的执行顺序是从上到下，从外到内。