ES装饰器讲解
当我们想要为 JavaScript 类或属性添加额外的功能或元数据时，装饰器是一种强大的工具。装饰器是一种特殊类型的声明，可以附加到类、方法、访问器或属性上，并以声明性的方式修改其行为。
什么是装饰器？
装饰器是一种特殊类型的函数，可以用来修改类、方法、访问器或属性的行为。它们通过在声明之前应用装饰器来附加额外的功能或元数据。装饰器使用 @ 符号作为前缀，放置在目标声明之前。
类装饰器
类装饰器是应用于类构造函数的装饰器。它接收一个参数，即目标类的构造函数，并允许我们在不修改原始类定义的情况下，通过添加额外的逻辑来修改类的行为。
下面是一个使用类装饰器的 TypeScript 示例代码：
function logClass(target: any) {
console.log(`Class ${target.name} has been decorated.`);
}
@logClass
class Example {
// 类定义
}
在上面的示例中，我们定义了一个名为 logClass 的装饰器函数，并将其应用于 Example 类。当我们实例化 Example 类时，装饰器函数会在类定义之前打印出一条日志。
方法装饰器
方法装饰器是应用于类方法的装饰器。它接收三个参数：目标类的原型，方法名称和属性描述符。我们可以使用方法装饰器来修改方法的行为或添加额外的逻辑。
下面是一个使用方法装饰器的 TypeScript 示例代码：
function authorize(target: any, methodName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
if (checkAuthorization()) {
return originalMethod.apply(this, args);
} else {
throw new Error("Unauthorized access.");
}
};
}
class Example {
@authorize
sayHello() {
console.log("Hello!");
}
}
在上面的示例中，我们定义了一个名为 authorize 的方法装饰器函数，并将其应用于 sayHello 方法。装饰器函数会在调用 sayHello 方法之前检查授权，并根据结果决定是否允许访问。
属性装饰器
属性装饰器是应用于类属性的装饰器。它接收两个参数：目标类的原型和属性名称。属性装饰器允许我们拦截对属性的访问，并在访问时执行自定义的逻辑。
下面是一个使用属性装饰器的 TypeScript 示例代码：
function uppercase(target: any, propertyName: string) {
const descriptor = Object.getOwnPropertyDescriptor(target, propertyName);
const originalSetter = descriptor?.set;
if (originalSetter) {
descriptor.set = function (value: string) {
if (typeof value === "string") {
value = value.toUpperCase();
}
originalSetter.call(this, value);
};
Object.defineProperty(target, propertyName, descriptor);
}
}
class Example {
@uppercase
message = "";
showMessage() {
console.log(this.message);
}
}
在上面的示例中，我们定义了一个名为 uppercase 的属性装饰器函数，并将其应用于 message 属性。装饰器函数会在设置 message 的值时将其转换为大写。
vue和react中的装饰器实例
vue中
在 Vue 中，你可以使用装饰器语法来声明和使用 Vue 组件的选项、指令、计算属性、生命周期钩子等。Vue 提供了官方的 @vue/babel-plugin-jsx 插件，使你可以在 Vue 组件中使用 JSX 语法，并使用装饰器来声明组件选项。
下面是一个在 Vue 组件中使用装饰器的示例代码：
<script>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Prop() readonly message!: string;
@Watch('message')
onMessageChanged(newValue: string, oldValue: string) {
console.log('Message changed:', newValue);
}
mounted() {
console.log('Component mounted');
}
render() {
return <div>{this.message}</div>;
}
}
</script>
在上面的示例中，我们使用了 @Component 装饰器来声明 Vue 组件，使用 @Prop 装饰器来定义组件的属性，使用 @Watch 装饰器来监听属性的变化，并在 mounted 生命周期钩子中输出日志。
react
下面是一个在 React 组件中使用装饰器的示例代码：
import React from 'react';
import { observer } from 'mobx-react';
@observer
class Counter extends React.Component {
count = 0;
increment() {
this.count++;
}
render() {
return (
<div>
<p>Count: {this.count}</p>
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
export default Counter;
在上面的示例中，我们使用了 @observer 装饰器来使组件成为 MobX 的观察者，以便在组件的状态发生变化时自动重新渲染。
小结
Vue 和 React 都支持使用装饰器来扩展组件的功能，但在具体的语法和用法上有所差异。在 Vue 中，你可以直接使用装饰器语法来声明和使用组件选项，而在 React 中，你需要使用第三方库来启用装饰器语法。无论是哪种框架，装饰器都提供了一种便捷的方式来扩展和定制组件的行为。
总结
装饰器是一种在 JavaScript 中广泛使用的语法特性，它允许我们通过注解方式来扩展和修改类、属性、方法等的行为。装饰器可以用于增强代码的可读性、简化逻辑、提高代码复用性，同时也使代码更加模块化和可维护。装饰器长用于日志记录、验证、依赖注入等，装饰器一般分为一下几种。
-
类装饰器：用于修改或扩展类的行为，可以在类声明前使用
@符号来应用装饰器。类装饰器可以访问类的构造函数、原型和静态成员，并可以在类实例化或继承时进行操作。 -
方法装饰器：用于修改或扩展类的方法行为，可以在方法声明前使用
@符号来应用装饰器。方法装饰器可以访问方法的属性描述符，并可以在方法调用前后进行操作。 -
属性装饰器：用于修改或扩展类的属性行为，可以在属性声明前使用
@符号来应用装饰器。属性装饰器可以访问属性的属性描述符，并可以在属性读取和赋值时进行操作。 -
参数装饰器：用于修改或扩展类的方法参数行为，可以在方法参数声明前使用
@符号来应用装饰器。参数装饰器可以访问参数所属的方法和类，并可以在方法调用前后进行操作。
值得注意的是，装饰器支持需要开启babal插件：
npm install --save-dev @babel/core @babel/preset-env @babel/plugin-proposal-decorators
.babelrc 文件需添加以下内容：
{
"presets": ["@babel/preset-env"],
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}
总而言之，装饰器是一种强大的语法特性，它可以帮助我们在不修改原有代码的情况下，通过注解的方式来扩展和修改代码的行为。装饰器在 TypeScript 和许多 JavaScript 框架（如 Vue 和 React）中得到广泛应用，对于提高代码的可读性、简化逻辑和增强功能非常有帮助。
