修饰器是一种用于修改类和类中方法的语法。它们允许我们为函数、类和对象附加元数据。在ES7中正式引入了修饰器，这为我们的代码提供了更优美、更清晰和更强大的编程体验。本文将为您介绍如何使用ES7修饰器。
什么是修饰器？
修饰器（Decorator） 是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上，可以修改类的行为。修饰器本质上是一个函数，它接收三个参数：
- 目标对象：被修饰的对象，可以是类、类的原型或者方法。
- 属性名：被修饰的属性名，仅在修饰类的属性时可用。
- 描述符：被修饰的属性或方法的描述符对象，描述符对象由
Object.defineProperty()方法产生。
修饰器是一个函数，可以返回一个函数或者一个对象。
如何使用修饰器？
首先，我们需要在项目中引入 babel-plugin-transform-decorators-legacy 这个babel转换插件，并且在 .babelrc 文件中进行配置。
{
"plugins": [
"transform-decorators-legacy"
]
}之后在以类为基础的开发中使用修饰器是很常见的。
类修饰器
类装饰器用于修改类的行为。
例如，我们有一个日志类，用于记录类中的方法被调用的时间。
class Logger {
log() {
console.log(`Method called at ${new Date()}`);
}
}如果需要记录所有方法被调用的时间，我们可以使用类装饰器来解决这个问题。我们定义一个 log 装饰器，它会在被修饰的方法被调用时记录时间。
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- ------ - -----------------
---------------- - -------- --------- -
------------------- ------ -- ----- ----------
------ ------------------ ------
--
------ -----------
-
----- ---------- -
----
------ -- -
------ - - --
-
-现在，当我们调用 add() 函数时，它将自动记录当前时间。这种方式非常灵活和易于维护。
方法修饰器
方法装饰器用于修改类中的方法。
例如，我们有一个简单的类，它含有一个sum() 方法，它可以计算两个数字的和。
class Calculator {
sum(a, b) {
return a + b;
}
}现在，在 sum() 函数中，我们添加一个方法装饰器 log ，来记录每次 sum() 调用的时间，我们可以这样写：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- ------ - -----------------
---------------- - -------- --------- -
------------------- ------ -- ----- ----------
------ ------------------ ------
--
------ -----------
-
----- ---------- -
----
------ -- -
------ - - --
-
-现在，每次调用sum() 函数时，都会自动记录时间。这个方法的目的是提高代码的可读性和可维护性。
属性修饰器
属性装饰器，用于修改类中的属性。
例如，我们有一个简单的 Person 类，它含有一个 name 属性，用于存储人名。
class Person {
constructor(name) {
this.name = name;
}
}我们希望对 name 属性进行校验。我们定义 validate 修饰器，它会在给 name 赋值时进行校验。
-- -------------------- ---- -------
-------- ---------------- ----- ----------- -
----- -------- - ---------------
-------------- - -------- ------- -
-- ------- ----- --- --------- -
----- --- --------------- ---- -- - ---------
-
------------------- -------
--
------ -----------
-
----- ------ -
---------
--- ----------- -
---------- - ------
-
--- ------ -
------ -----------
-
-现在，每次给 name 赋值时，将会进行校验，只有当值为字符串时才会通过。
总结
修饰器是一种非常强大的语法，它能够帮助我们更好地组织和抽象代码逻辑，从而使我们的代码更易于维护和扩展。在本文中，我们介绍了如何使用修饰器来修改类、方法和属性的行为，并且给出了相应的示例代码，希望本篇文章对于初学者能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f5077968c7c53b015b4ee
