Ecmascript 2016 / ES7 修饰器的例子

阅读时长 7 分钟读完

修饰器是 ES7 中最为引人注目的特性之一。它们允许我们在类和方法上附加元数据,这些元数据可以被用于进行代码分析,比如类型检查、数据校验、缓存等。

什么是修饰器?

简单来说,修饰器就是一个函数,它可以包装一个类或者类的方法。修饰器使用一个 @ 符号作为前缀,放在类或者方法的前面。

在这个例子中,我们定义了一个 logger() 函数,它会被用作修饰器。然后我们在 MyClass 前面使用了 @logger,这样 logger() 函数就会包装 MyClass

修饰器的分类

修饰器可以分为两种:

  • 类修饰器
  • 方法修饰器

类修饰器

类修饰器用于修改类的行为。它们被附加在类的定义前面,并且是 static。一个类修饰器接受一个参数,这个参数就是将被修饰的类本身。

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

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

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

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

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

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

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

在这个例子中,我们定义了一个 uppercase() 函数,它会将类中所有方法返回的字符串转换成大写。我们通过 @uppercase 修饰器将它应用到 MyClass 上。

方法修饰器

方法修饰器用于修改类中的方法。它们被附加在某个特定的方法前面,并且是非 static。一个方法修饰器接受三个参数,分别是:

  • 修饰的类的原型
  • 方法的名称
  • 方法的描述符
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
  ----- -------------- - ----------------

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

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

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

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

在这个例子中,我们定义了一个 log() 函数作为方法修饰器。它会在方法调用前先打印一条日志,然后再执行原方法。通过在 sayHello() 方法前面使用 @log 修饰器,我们将它应用到了这个方法上。

修饰器的使用场景

修饰器可以用于很多场景,比如:

  • 类型检查
  • 数据校验
  • 缓存

下面是一个使用修饰器实现缓存的例子:

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

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

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

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

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

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

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

在这个例子中,我们定义了一个 cache() 函数作为方法修饰器。它会为 compute() 方法增加缓存功能,避免相同参数的计算重复执行。我们通过在 compute() 方法前面使用 @cache 修饰器来将它应用到这个方法上。

总结

修饰器是一个非常强大的特性,可以让我们实现很多有用的功能。它们的使用方式很灵活,可以用于类和方法级别的上下文中。在编写代码时,我们应该考虑将修饰器作为一种工具,在恰当的场景下使用它们可以大大提高代码的可维护性和可扩展性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a79e3048841e989441c0ba

纠错
反馈