JS 装饰器解析

zzbo 发布于2019-08-22 15:30 / 2862人阅读

摘要：在的中，定义了种不同装饰器的接口，其中装饰类以及装饰类方法的接口定义如下所示下面对这两种情况进行解析。作用于类的装饰器当装饰的对象是类时，我们操作的就是这个类本身。相关链接中的装饰器装饰器场景实战修饰器

随着 ES6 和 TypeScript 中类的引入，在某些场景需要在不改变原有类和类属性的基础上扩展些功能，这也是装饰器出现的原因。

装饰器简介

作为一种可以动态增删功能模块的模式(比如 redux 的中间件机制)，装饰器同样具有很强的动态灵活性，只需在类或类属性之前加上 @方法名 就完成了相应的类或类方法功能的变化。

不过装饰器模式仍处于第 2 阶段提案中，使用它之前需要使用 babel 模块 transform-decorators-legacy 编译成 ES5 或 ES6。

在 TypeScript 的 lib.es5.d.ts 中，定义了 4 种不同装饰器的接口，其中装饰类以及装饰类方法的接口定义如下所示：

declare type ClassDecorator = (target: TFunction) => TFunction | void;
declare type MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor) => TypedPropertyDescriptor | void;

下面对这两种情况进行解析。

作用于类的装饰器

当装饰的对象是类时，我们操作的就是这个类本身。

@log
class MyClass { }

function log(target) { // 这个 target 在这里就是 MyClass 这个类
   target.prototype.logger = () => `${target.name} 被调用`
}

const test = new MyClass()
test.logger() // MyClass 被调用

由于装饰器是表达式，我们也可以在装饰器后面再添加提个参数：

@log("hi")
class MyClass { }

function log(text) {
  return function(target) {
    target.prototype.logger = () => `${text}，${target.name} 被调用`
  }
}

const test = new MyClass()
test.logger() // hello，MyClass 被调用

在使用 redux 中，我们最常使用 react-redux 的写法如下：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyComponent extends React.Component {}

经过上述分析，我们知道了上述写法等价于下面这种写法：

class MyComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

作用于类方法的装饰器

与装饰类不同，对类方法的装饰本质是操作其描述符。可以把此时的装饰器理解成是 Object.defineProperty(obj, prop, descriptor) 的语法糖，看如下代码：

class C {
  @readonly(false)
  method() { console.log("cat") }
}

function readonly(value) {
  return function (target, key, descriptor) { // 此处 target 为 C.prototype; key 为 method;
    // 原 descriptor 为：{ value: f, enumarable: false, writable: true, configurable: true }
    descriptor.writable = value
    return descriptor
  }
}

const c = new C()
c.method = () => console.log("dog")

c.method() // cat

可以看到装饰器函数接收的三个参数与 Object.defineProperty 是完全一样的，具体实现可以看 babel 转化后的代码，主要实现如下所示：

var C = (function() {
  class C {
    method() { console.log("cat") }
  }

  var temp
  temp = readonly(false)(C.prototype, "method",
    temp = Object.getOwnPropertyDescriptor(C.prototype, "method")) || temp // 通过 Object.getOwnPropertyDescriptor 获取到描述符传入到装饰器函数中

  if (temp) Object.defineProperty(C.prototype, "method", temp)
  return C
})()

再将再来看看如果有多个装饰器作用于同一个方法上呢？

class C {
  @readonly(false)
  @log
  method() { }
}

经 babel 转化后的代码如下：

desc = [readonly(false), log]
    .slice()
    .reverse()
    .reduce(function(desc, decorator) {
      return decorator(target, property, desc) || desc;
    }, desc);

可以清晰地看出，经过 reverse 倒序后，装饰器方法会至里向外执行。

相关链接

javascript-decorators
Javascript 中的装饰器
JS 装饰器（Decorator）场景实战
修饰器
Babel

云服务器 GPU云服务器装饰器装饰器模式多个装饰器多重装饰器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93493.html

新上课程推荐：TypeScript完全解读(总26课时）

摘要：本套课程包含两大部分，第一部分是基础部分，也是重要部分，参考官方文档结构，针对内容之间的关联性和前后顺序进行合理调整。 showImg(https://segmentfault.com/img/bVbpBA0?w=1460&h=400); 讲师简介： iview 核心开发者，iview-admin 作者，百万级虚拟渲染表格组件 vue-bigdata-table 作者。目前就职于知名互...

caozhijian 2019-08-26 13:35 评论0 收藏0
ES6 系列之我们来聊聊装饰器

摘要：第二部分源码解析接下是应用多个第二部分对于一个方法应用了多个，比如会编译为在第二部分的源码中，执行了和操作，由此我们也可以发现，如果同一个方法有多个装饰器，会由内向外执行。有了装饰器，就可以改写上面的代码。 Decorator 装饰器主要用于: 装饰类装饰方法或属性装饰类 @annotation class MyClass { } function annotation(ta...

eternalshallow 2019-08-23 13:13 评论0 收藏0
【翻译】babel对TC39装饰器草案的实现

摘要：历史装饰器这个概念三年多前被首次提出。在版本年中发布了对装饰器的支持以及许多特性。有不同的安全级别需要考虑装饰器不应该意外泄漏私有名称。你可以测试装饰器的新语法，并向提案的作者们提出反馈意见。原文地址：https://babeljs.io/blog/2018/...原文作者：Nicolò Ribaudo Babel 7.1.0最终支持新的装饰器提案，可以通过@babel/plugin...

Mr_zhang 2019-08-23 15:30 评论0 收藏0
[译] Angular 的 @Host 装饰器和元素注入器

摘要：装饰器我们为啥要讨论元素注入器而不是装饰器这是因为会把元素注入器依赖解析过程限制在当前组件视图内。但是一旦使用了装饰器，整个依赖解析过程就会在第一阶段完成后停止解析，也就是说，元素注入器只在组件视图内解析依赖，然后就停止解析工作。原文链接：A curious case of the @Host decorator and Element Injectors in Angular 我...

marek 2019-08-23 10:38 评论0 收藏0
【用故事解读 MobX 源码（四）】装饰器和 Enhancer

摘要：所以这是一篇插队的文章，用于去理解中的装饰器和概念。因此，该的作用就是根据入参返回具体的描述符。其次局部来看，装饰器具体应用表达式是，其函数签名和是一模一样。等装饰器语法，是和直接使用是等效等价的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 评论0 收藏0