深入理解和应用JavaScript中的装饰器

JavaScript一直在发展和吸取新的附加功能,以增强其对开发者的吸引力。其中一个新语法就是装饰器。装饰器对于开发者来说,是一枚强大的工具,它可以在忽略函数的内部巧妙地修改其行为。

什么是装饰器?

装饰器就是一个函数,它可以修改类的行为或属性,而不需要知道类内部的具体实现。装饰器用于提高代码的可读性和健壮性,同时缩减冗余的代码。

如何使用装饰器?

让我们首先查看一下如何在JS中使用装饰器。在编写装饰器时,你需要将要装饰的对象,其原始描述符和装饰器的目标传给装饰器。

例如,我们有一个讲述狗叫声的函数,我们想要装饰它:

scss 复制代码
function dogBark() {
  console.log('Woof woof');
}

dogBark();

这是一段简单的代码,但我们希望这个函数在每次调用时都打印出函数被调用的时间。这就是我们使用装饰器的地方。首先我们需要创建一个装饰器:

javascript 复制代码
function decorator(func) {
  return function () {
    console.log(`Function ${func.name} was called at: ${new Date().toLocaleTimeString()}`);
    func();
  };
}

然后我们把这个装饰器应用到我们的函数上:

ini 复制代码
dogBark = decorator(dogBark);
dogBark();

现在,每次我们调用dogBark函数时,都会打协议输出函数被调用的时间。

类装饰器

到此为止,我们已经成功地创建了一个将功能添加到单个函数的装饰器。那么如果我们想要添加到类上呢?

让我们设置一个类,并为其添加一些装饰:

typescript 复制代码
@logger
class Dog {
  constructor() {
    console.log('new dog was created');
  }
}

在这段代码中,我们使用 "@logger" 装饰器装饰了整个 "Dog" 类。那么问题来了,这个 "@logger" 装饰器是什么样的呢?这个装饰器需要注入到类的原型链中,以此来拦截类的实例。

下面,我们就来看看这个装饰器:

javascript 复制代码
function logger(target) {
  let original = target;

  function construct(constructor, args) {
    let instance = new Function('origin', 'return new origin(...args)')(original, args);
    console.log(`New dog was created at: ${new Date().toLocaleTimeString()}`);
    return instance;
  }

  let prototype = Object.create(original.prototype);
  let surrogate = function (...args) { return construct(original, args); };
  surrogate.prototype = prototype;
  return surrogate;
}

这个装饰器有点复杂,但仔细分析后你会发现,它在实例化类之后,打印出一条消息显示实例创建的时间。

属性和方法装饰器

最后,我们可以通过装饰器来修改类的属性和方法。

例如,我们有这样一个类:

javascript 复制代码
class Dog {
  bark() {
    console.log('Woof woof');
  }

  @uppercase
  breed = 'Poodle';
}

function uppercase(target, key) {
  let value = target[key];

  if (delete target[key]) {
    Object.defineProperty(target, key, {
      get: () => value,
      set: (newVal) => value = newVal.toUpperCase(),
      enumerable: true,
      configurable: true
    });
  }
}

在这份代码中,我们创建了一个装饰器将狗的品种强制大写。

结语

JS装饰器是一个强大的工具,允许我们在不修改原始函数或类的情况下增加新功能。装饰器在很多流行的JS库中都有使用,掌握装饰器也许会为你的JS生涯开辟新的可能性。

相关推荐
星哥说事9 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家37 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在41 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端