在前端开发中，装饰器是一种非常有用的语法，它可以对类、方法、属性等进行修饰和扩展，从而使代码更加灵活和可维护。在 TypeScript 中，装饰器已经成为了一种标准的语法，但是在 ES 中并没有原生支持，需要通过一些库或者插件来实现。不过，随着 ES11 的发布，装饰器终于被纳入了标准，并且得到了更好的支持。本文将介绍 TypeScript 中的装饰器，以及如何将其修改成 ES11 的语法。
TypeScript 中的装饰器
在 TypeScript 中，装饰器通过 @ 符号来表示，可以作用于类、方法、属性等，其语法如下：
-- -------------------- ---- ------- ---------- ----- ------- - ---------- ------ ------------- ------- ---------- ------- ------- ---------- ---------- -- -
其中，decorator 为装饰器函数，它接收三个参数：
- 如果装饰的是类，则第一个参数为类本身；
- 如果装饰的是属性或者方法，则第一个参数为类的原型对象；
- 如果装饰的是静态属性或者方法，则第一个参数为类本身的构造函数。
第二个参数为属性或者方法的名称，第三个参数为属性或者方法的描述符。
例如，我们可以定义一个 log 装饰器来打印方法的调用信息：
-- -------------------- ---- -------
-------- ----------- ---- ----- ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- ------- ---- ---------- --------------------------
----- ------ - -------------------------- ------
------------------- -- -------- ------------
------ -------
--
------ -----------
-
----- ------- -
----
----------- ------- -- ------- -
------ - - --
-
-
----- -------- - --- ----------
-------------------- --- -- ------- -------- ---- ---------- -----
-- ------ -- --------- -在上面的例子中，我们定义了一个 log 装饰器，它会在方法被调用时打印调用信息，并返回方法的执行结果。然后，我们使用 @log 装饰器来修饰 myMethod 方法，使得每次调用该方法都会被打印出来。
ES11 中的装饰器
在 ES11 中，装饰器的语法和 TypeScript 中的语法基本一致，只是需要使用 # 符号来表示私有属性。例如：
-- -------------------- ---- ------- ---------- ----- ------- - ---------- --------------- ---------- ------- ---------- ---------- -- -
其中，decorator 为装饰器函数，它的参数和 TypeScript 中的参数一样。
例如，我们可以将上面的 TypeScript 代码修改成 ES11 的语法：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------------- - -----------------
---------------- - -------- --------- -
-------------------- ------- ---- ---------- --------------------------
----- ------ - -------------------------- ------
------------------- -- -------- ------------
------ -------
--
------ -----------
-
----- ------- -
----
----------- -- -
------ - - --
-
-
----- -------- - --- ----------
-------------------- --- -- ------- -------- ---- ---------- -----
-- ------ -- --------- -可以看到，ES11 中的装饰器和 TypeScript 中的装饰器非常相似，只是需要将 @ 符号改成 # 符号，其他都是一样的。
总结
装饰器是一种非常有用的语法，它可以对类、方法、属性等进行修饰和扩展，从而使代码更加灵活和可维护。在 TypeScript 中，装饰器已经成为了一种标准的语法，但是在 ES 中并没有原生支持，需要通过一些库或者插件来实现。不过，随着 ES11 的发布，装饰器终于被纳入了标准，并且得到了更好的支持。
在使用装饰器时，需要注意装饰器函数的参数和返回值，以及装饰器的使用场景和作用。如果使用不当，可能会导致代码出现错误或者性能问题。因此，建议在使用装饰器时，要仔细阅读相关文档，并且进行充分的测试和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66079591d10417a222628e20