Javascript装饰器原理

发表于 3年以前  | 总阅读数:346 次

一个以@开头的描述性词语。英语的decorator动词是decorate,装饰的意思。其中词根dek(dec发音)原始印欧语系中意思是“接受”。即,原来的某个事物接受一些新东西(而变得更好)。

从另外一个角度描述,装饰器主要是在被装饰对象的外部起作用,而非入侵其内部发生什么改变。装饰器模式同时也是一种开发模式,其地位虽然弱于MVC、IoC等,但不失为一种优秀的模式。

JavaScript的装饰器可能是借鉴自Python也或许是Java。较为明显的不同的是大部分语言的装饰器必须是一行行分开,而js的装饰器可以在一行中。

装饰器存在的意义

会偷懒的程序员,才是优秀的程序员。

举个例子:我拿着员工卡进入公司总部大楼。因为每个员工所属的部门、级别不同,并不能进入大楼的任何房间。每个房间都有一扇门;那么,公司需要安排每个办公室里至少一个人关于验证来访者的工作:

  1. 先登记来访者
  2. 验证是否有权限进入,如果没有则要求其离开
  3. 记录其离开时间

还有一个选择方式,就是安装电子门锁,门锁只是将员工卡的信息传输给机房,由特定的程序验证。

前者暂且称之为笨模式,代码如下:

function A101(who){
  record(who,new Date(),'enter');
  if (!permission(who)) {
    record(who,new Date(),'no permission')
    return void;
  }
  // 继续执行
  doSomeWork();
  record(who,new Date(),'leave')
}

function A102(who){
record(who,new Date(),'enter');
  if (!permission(who)) {
    record(who,new Date(),'no permission')
    return void;
  }
  // 继续执行
  doSomeWork();
  record(who,new Date(),'leave')
}

// ...

有经验的大家肯定第一时间想到了,把那些重复语句封装为一个方法,并统一调用。是的,这样可以解决大部分问题,但是还不够“优雅”。同时还有另外一个问题,如果“房间”特别多,又或者只有大楼奇数号房间要验证偶数不验证,那岂不是很“变态”?如果使用装饰器模式来做,代码会如下面这样的:

@verify(who)
class Building {
  @verify(who)
  A101(){/*...*/}
  @verify(who)
  A102(){/*...*/}
  //...
}

verify是验证的装饰器,而其本质就是一组函数。

JavaScript装饰器

正如先前的那个例子,装饰器其实本身就是一个函数,它在执行被装饰的对象之前先被执行。

在JavaScript中,装饰器的类型有:

  • 存取方法(属性的get和set)
  • 字段
  • 方法
  • 参数

由于目前装饰器概念还处于提案阶段,不是一个正式可用的js功能,所以想要使用这个功能,不得不借助翻译器工具,例如Babel工具或者TypeScript编译JS代码转后才能被执行。我们需要先搭建运行环境,配置一些参数。(以下过程,假设已经正确安装了NodeJS开发环境以及包管理工具)

cd project && npm init
npm i -D @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env babel-plugin-parameter-decorator

创建一个.babelrc配置文件,如下:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-parameter-decorator"
  ]
}

利用下面的转换命令,我们可以得到ES5的转换程序:

npx babel source.js --out-file target.js

类装饰器

创建一个使用装饰器的JS程序decorate-class.js

@classDecorator
class Building {
  constructor() {
    this.name = "company";
  }
}

const building = new Building();

function classDecorator(target) {
  console.log("target", target);
}

以上是最最简单的装饰器程序,我们利用babel将其“翻译”为ES5的程序,然后再美化一下后得到如下程序。

"use strict";

var _class;

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Building =
  classDecorator(
    (_class = function Building() {
      _classCallCheck(this, Building);

      this.name = "company";
    })
  ) || _class;

var building = new Building();

function classDecorator(target) {
  console.log("target", target);
}

第12行就是在类生成过程中,调用函数形态的装饰器,并将构造函数(类本身)送入其中。同样揭示了装饰器的第一个参数是类的构造函数的由来。

方法 (method)装饰器

稍微修改一下代码,依旧是尽量保持最简单:

class Building {
  constructor() {
    this.name = "company";
  }
  @methodDecorator
  openDoor() {
    console.log("The door being open");
  }
}

const building = new Building();

function methodDecorator(target, property, descriptor) {
  console.log("target", target);
  if (property) {
    console.log("property", property);
  }
  if (descriptor) {
    console.log("descriptor", descriptor);
  }
  console.log("=====end of decorator=========");
}

然后转换代码,可以发现,这次代码量突然增大了很多。排除掉_classCallCheck、_defineProperties和_createClass三个函数,关注_applyDecoratedDescriptor函数:

function _applyDecoratedDescriptor(
  target,
  property,
  decorators,
  descriptor,
  context
) {
  var desc = {};
  Object.keys(descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;
  if ("value" in desc || desc.initializer) {
    desc.writable = true;
  }
  desc = decorators
    .slice()
    .reverse()
    .reduce(function (desc, decorator) {
      return decorator(target, property, desc) || desc;
    }, desc);
  if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
  }
  if (desc.initializer === void 0) {
    Object.defineProperty(target, property, desc);
    desc = null;
  }
  return desc;
}

它在生成构造函数之后,执行了这个函数,特别注意,这个装饰器函数是以数组形式的参数传递的。然后到上述代码的17~22行,将装饰器逐个应用,其中对装饰器的调用就在第21行。

它发送了3个参数,target指类本身。property指方法名(或者属性名),desc是可能被先前装饰器被处理过的descriptor,如果是第一次循环或只有一个装饰器,那么就是方法或属性本身的descriptor。

存取器(accessor)装饰

JS关于类的定义中,支持get和set关键字针对设置某个字段的读写操作逻辑,装饰器也同样支持这类方法的操作。

class Building {
  constructor() {
    this.name = "company";
  }
  @propertyDecorator
  get roomNumber() {
    return this._roomNumber;
  }

  _roomNumber = "";
  openDoor() {
    console.log("The door being open");
  }
}

有心的读者可能已经发现了,存取器装饰的代码与上面的方法装饰代码非常接近。关于属性 get和set方法,其本身也是一种方法的特殊形态。所以他们之间的代码就非常接近了。

属性装饰器

继续修改源代码:

class Building {
  constructor() {
    this.name = "company";
  }
  @propertyDecorator
  roomNumber = "";
}

const building = new Building();

function propertyDecorator(target, property, descriptor) {
  console.log("target", target);
  if (property) {
    console.log("property", property);
  }
  if (descriptor) {
    console.log("descriptor", descriptor);
  }
  console.log("=====end of decorator=========");
}

转换后的代码,还是与上述属性、存取器的代码非常接近。但除了_applyDecoratedDescriptor外,还多了一个_initializerDefineProperty函数。这个函数在生成构造函数时,将声明的各种字段绑定给对象。

参数装饰器

参数装饰器的使用位置较之前集中装饰器略有不同,它被使用在行内。

class Building {
  constructor() {
    this.name = "company";
  }
  openDoor(@parameterDecorator num, @parameterDecorator zoz) {
    console.log(`${num} door being open`);
  }
}

const building = new Building();

function parameterDecorator(target, property, key) {
  console.log("target", target);
  if (property) {
    console.log("property", property);
  }
  if (key) {
    console.log("key", key);
  }
  console.log("=====end of decorator=========");
}

转换后的代码区别就比较明显了,babel并没有对其生成一个特定的函数对其进行特有的操作,而只在创建完类(构造函数)以及相关属性、方法后直接调用了开发者自己编写的装饰器函数:

var Building = /*#__PURE__*/function () {
  function Building() {
    _classCallCheck(this, Building);

    this.name = "company";
  }

  _createClass(Building, [{
    key: "openDoor",
    value: function openDoor(num, zoz) {
      console.log("".concat(num, " door being open"));
    }
  }]);

  parameterDecorator(Building.prototype, "openDoor", 1);
  parameterDecorator(Building.prototype, "openDoor", 0);
  return Building;
}();

装饰器应用

使用参数——闭包

以上所有的案例,装饰器本身均没有使用任何参数。然实际应用中,经常会需要有特定的参数需求。我们再回到一开头的例子中verify(who),其中需要传入一个身份变量。哪又怎么做?我们少许改变一下类装饰器的代码:

const who = "Django";
@classDecorator(who)
class Building {
  constructor() {
    this.name = "company";
  }
}

转换后得到

// ...
var who = "Django";
var Building =
  ((_dec = classDecorator(who)),
  _dec(
    (_class = function Building() {
      _classCallCheck(this, Building);

      this.name = "company";
    })
  ) || _class);
// ...

请注意第4第5行,它先执行了装饰器,然后再用返回值将类(构造函数)送入。相对应的,我们就应该将构造函数写成下面这样:

function classDecorator(people) {
  console.log(`hi~ ${people}`);
  return function (target) {
    console.log("target", target);
  };
}

同样的,方法、存取器、属性和参数装饰器均是如此。

装饰器包裹方法

到此,我们已经可以将装饰器参数与目标对象结合起来,进行一些逻辑类的操作。那么再回到文章的开头的例子中:需求中要先验证来访者权限,然后记录,最后在来访者离开时再做一次记录。此时需要监管对象方法被调用的整个过程。

请大家留意那个方法装饰器的descriptor,我们可以利用这个对象来“重写”这个方法。

class Building {
  constructor() {
    this.name = "company";
  }

  @methodDecorator("Gate")
  openDoor(firstName, lastName) {
    return `The door will be open, when ${firstName} ${lastName} is walking into the ${this.name}.`;
  }
}

let building = new Building();
console.log(building.openDoor("django", "xiang"));

function methodDecorator(door) {
  return function (target, property, descriptor) {
    let fn = descriptor.value;
    descriptor.value = function (...args) {
      let [firstName, lastName] = args;
      console.log(`log: ${firstName}, who are comming.`);
      // verify(firstName,lastName)
      let result = Reflect.apply(fn, this, [firstName, lastName]);
      console.log(`log: ${result}`);
      console.log(`log: ${firstName}, who are leaving.`);
      return result;
    };
    return descriptor;
  };
}

代码第17行,将原方法暂存;18行定义一个新的方法,20~25行,记录、验证和记录离开的动作。

log: Django, who are comming.
log: The door will be open, when Django Xiang is walking in to the company.
log: Django, who are leaving.
The door will be open, when Django Xiang is walking in to the company

装饰顺序

通过阅读转换后的代码,我们知道装饰器工作的时刻是在类被实例化之前,在生成之中完成装饰函数的动作。那么,如果不同类型的多个装饰器同时作用,其过程是怎样的?我们将先前的案例全部整合到一起看看:

const who = "Django";
@classDecorator(who)
class Building {
  constructor() {
    this.name = "company";
  }

  @propertyDecorator
  roomNumber = "";

  @methodDecorator
  openDoor(@parameterDecorator num) {
    console.log(`${num} door being open`);
  }

  @accessorDecorator
  get roomNumber() {
    return this._roomNumber;
  }
}

const building = new Building();

function classDecorator(people) {
  console.log(`class decorator`);
  return function (target) {
    console.log("target", target);
  };
}

function methodDecorator(target, property, descriptor) {
  console.log("method decorator");
}

function accessorDecorator(target, property, descriptor) {
  console.log("accessor decorator");
}

function propertyDecorator(target, property, descriptor) {
  console.log("property decoator");
}

function parameterDecorator(target, property, key) {
  console.log("parameter decorator");
}
  1. class decorator
  2. parameter decorator
  3. property decoator
  4. method decorator
  5. accessor decorator

还可以通过阅读转换后的源代码得到执行顺序:

  1. 类装饰器(在最外层)
  2. 参数装饰器(在生成构造函数最里层)
  3. 按照出现的先后顺序的:属性、方法和存取器

总结

装饰器是一种优雅的开发模式,极大的方便了开发者编码过程,同时提升了代码的可读性。我们在使用装饰器开发时,还是非常有必要了解其运行机理。

本文由哈喽比特于3年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/SPug1AQ1-Bk06Iw623DipA

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:6月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:6月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:6月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:6月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:6月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:6月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:6月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:6月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:6月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:6月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:6月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:6月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:6月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:6月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:6月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:6月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:6月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:6月以前  |  398次阅读  |  详细内容 »
 相关文章
Java 中验证时间格式的 4 种方法 1年以前  |  3206次阅读
Java经典面试题答案解析(1-80题) 3年以前  |  2494次阅读
CentOS 配置java应用开机自动启动 3年以前  |  2377次阅读
IDEA依赖冲突分析神器—Maven Helper 3年以前  |  2365次阅读
SpringBoot 控制并发登录的人数教程 4年以前  |  2084次阅读
 目录