一文教你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）中得到广泛应用，对于提高代码的可读性、简化逻辑和增强功能非常有帮助。

365学习不打烊，可以关注我的公众号：程序员每日三问。每天向你推送面试题，算法及干货，期待你的点赞和关注。