面试官：你是怎么理解ES6中 Decorator 的？使用场景？

亦凉 2023-01-10 05:09 160阅读 0赞

![format_png][]

## 一、介绍 ##

Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式

简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。

`ES6`中`Decorator`功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法

这里定义一个士兵，这时候他什么装备都没有

class soldier{ 
    }

定义一个得到 AK 装备的函数，即装饰器

function strong(target){
        target.AK = true
    }

使用该装饰器对士兵进行增强

@strong
    class soldier{
    }

这时候士兵就有武器了

soldier.AK // true

上述代码虽然简单，但也能够清晰看到了使用`Decorator`两大优点：

*  代码可读性变强了，装饰器命名相当于一个注释
 *  在不改变原有代码情况下，对原来功能进行扩展

## 二、用法 ##

`Docorator`修饰对象为下面两种：

*  类的装饰
 *  类属性的装饰

### 类的装饰 ###

当对类本身进行装饰的时候，能够接受一个参数，即类本身

将装饰器行为进行分解，大家能够有个更深入的了解

@decorator
    class A {}
    
    // 等同于
    
    class A {}
    A = decorator(A) || A;

下面`@testable`就是一个装饰器，`target`就是传入的类，即`MyTestableClass`，实现了为类添加静态属性

@testable
    class MyTestableClass {
      // ...
    }
    
    function testable(target) {
      target.isTestable = true;
    }
    
    MyTestableClass.isTestable // true

如果想要传递参数，可以在装饰器外层再封装一层函数

function testable(isTestable) {
      return function(target) {
        target.isTestable = isTestable;
      }
    }
    
    @testable(true)
    class MyTestableClass {}
    MyTestableClass.isTestable // true
    
    @testable(false)
    class MyClass {}
    MyClass.isTestable // false

### 类属性的装饰 ###

当对类属性进行装饰的时候，能够接受三个参数：

*  类的原型对象
 *  需要装饰的属性名
 *  装饰属性名的描述对象

首先定义一个`readonly`装饰器

function readonly(target, name, descriptor){
      descriptor.writable = false; // 将可写属性设为false
      return descriptor;
    }

使用`readonly`装饰类的`name`方法

class Person {
      @readonly
      name() { return `${this.first} ${this.last}` }
    }

相当于以下调用

readonly(Person.prototype, 'name', descriptor);

如果一个方法有多个装饰器，就像洋葱一样，先从外到内进入，再由内到外执行

function dec(id){
        console.log('evaluated', id);
        return (target, property, descriptor) =>console.log('executed', id);
    }
    
    class Example {
        @dec(1)
        @dec(2)
        method(){}
    }
    // evaluated 1
    // evaluated 2
    // executed 2
    // executed 1

外层装饰器`@dec(1)`先进入，但是内层装饰器`@dec(2)`先执行

### 注意 ###

装饰器不能用于修饰函数，因为函数存在变量声明情况

var counter = 0;
    
    var add = function () {
      counter++;
    };
    
    @add
    function foo() {
    }

编译阶段，变成下面

var counter;
    var add;
    
    @add
    function foo() {
    }
    
    counter = 0;
    
    add = function () {
      counter++;
    };

意图是执行后`counter`等于 1，但是实际上结果是`counter`等于 0

## 三、使用场景 ##

基于`Decorator`强大的作用，我们能够完成各种场景的需求，下面简单列举几种：

使用`react-redux`的时候，如果写成下面这种形式，既不雅观也很麻烦

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

通过装饰器就变得简洁多了

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

将`mixins`，也可以写成装饰器，让使用更为简洁了

function mixins(...list) {
      return function (target) {
        Object.assign(target.prototype, ...list);
      };
    }
    
    // 使用
    const Foo = {
      foo() { console.log('foo') }
    };
    
    @mixins(Foo)
    class MyClass {}
    
    let obj = new MyClass();
    obj.foo() // "foo"

下面再讲讲`core-decorators.js`几个常见的装饰器

#### @antobind ####

`autobind`装饰器使得方法中的`this`对象，绑定原始对象

import { autobind } from 'core-decorators';
    
    class Person {
      @autobind
      getPerson() {
        return this;
      }
    }
    
    let person = new Person();
    let getPerson = person.getPerson;
    
    getPerson() === person;
    // true

#### @readonly ####

`readonly`装饰器使得属性或方法不可写

import { readonly } from 'core-decorators';
    
    class Meal {
      @readonly
      entree = 'steak';
    }
    
    var dinner = new Meal();
    dinner.entree = 'salmon';
    // Cannot assign to read only property 'entree' of [object Object]

#### @deprecate ####

`deprecate`或`deprecated`装饰器在控制台显示一条警告，表示该方法将废除

import { deprecate } from 'core-decorators';
    
    class Person {
      @deprecate
      facepalm() {}
    
      @deprecate('功能废除了')
      facepalmHard() {}
    }
    
    let person = new Person();
    
    person.facepalm();
    // DEPRECATION Person#facepalm: This function will be removed in future versions.
    
    person.facepalmHard();
    // DEPRECATION Person#facepalmHard: 功能废除了

## 参考文献 ##

*  https://es6.ruanyifeng.com/\#docs/decorator

面试官VUE系列已完结：33／33

面试官ES6系列更新中: 10/10

[面试官：说说var、let、const之间的区别][var_let_const]

[面试官：ES6中数组新增了哪些扩展?][ES6]

[面试官：ES6中对象新增了哪些扩展?][ES6 1]

[面试官：ES6中函数新增了哪些扩展?][ES6 2]

[面试官：ES6中新增的Set、Map两种数据结构怎么理解?][ES6_Set_Map]

[面试官：你是怎么理解ES6中 Promise的？使用场景？][ES6_ Promise]

[面试官：怎么理解ES6中 Generator的？使用场景？][ES6_ Generator]

[面试官：你是怎么理解ES6中Proxy的？使用场景?][ES6_Proxy]

[面试官：你是怎么理解ES6中Module的？使用场景？][ES6_Module]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221119/dcbe60c80b70419180f6bf3911fb19c2.png
[var_let_const]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c46bcb674d7d9620c5615104d5a9ebcad9cff446bcfb1b1d5e9c5f1eb34d954790e79293&idx=1&mid=2247484989&scene=21&sn=f44145efa3a928e6bcaf714da233b19e#wechat_redirect
[ES6]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c435cb674d23fe800d6bb61c4ab0dd0a5331a24de5ecf0c11b2e3073e1e64ae50f201e4b&idx=2&mid=2247485027&scene=21&sn=1f79f8eca688153c5d8c9ef500b6b8bc#wechat_redirect
[ES6 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c42dcb674d3ba096c518074f28ee25b60154796ed2bfdeb2b57abbf1853f4b49d1885f84&idx=1&mid=2247485051&scene=21&sn=8986b5341897589a3456e76e8909fdcc#wechat_redirect
[ES6 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4c7cb674dd170b612f8163c37efa0e33ad4960b4df318439d1af630a18fcb9c42dbd2c8&idx=1&mid=2247485073&scene=21&sn=e2902ebeeead48faaadc27327a24427c#wechat_redirect
[ES6_Set_Map]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4ffcb674de9c404261d0977f8685815918082fc189ea8cf9ae4acb5bc71f5cb501c385c&idx=1&mid=2247485097&scene=21&sn=e0fb0e9ebdd87ed9f2cfca0193931120#wechat_redirect
[ES6_ Promise]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4afcb674db92fcc02f55bdd76bfb5a09892fb4d46e278057841e19c506d39c4ffb38601&idx=2&mid=2247485177&scene=21&sn=21f2d4521bc054d5d53acc31db4c3922#wechat_redirect
[ES6_ Generator]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c55dcb674c4bb6dbb864233c0dad43b4fb09dfc54775978319888ae3f6ff5454aeba7e1a&idx=1&mid=2247485195&scene=21&sn=f0c7f093abb606c01232c80e1ad0c89e#wechat_redirect
[ES6_Proxy]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c575cb674c632af0779dc627346877d37ff6d10573644e54fea507245c9a95adcf2666a0&idx=2&mid=2247485219&scene=21&sn=5046bd8c24c819368c8fd984708c9b8a#wechat_redirect
[ES6_Module]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c56acb674c7c13035373a6596cdedd74e6bad48fd048ca8b149e748d249b8dc11670c64b&idx=1&mid=2247485244&scene=21&sn=43a12f41b10fb79837daaa5d1edb914e#wechat_redirect
[format_png 1]: /images/20221119/073a624387b0423c9317bfcd9c6350f8.png