ES6 Decorator装饰器：概念、用法与使用场景

文
章
目
录

• 一、ES6 Decorator 是什么
• 二、ES6 Decorator 的用法
• （一）类的装饰
• （二）类属性的装饰
• （三）装饰器使用的注意事项
• 三、ES6 Decorator 的使用场景
• （一）优化React Redux代码
• （二）简化mixins使用
• （三）使用core – decorators.js 中的常见装饰器

ES6（ECMAScript 2015）引入的许多新特性极大地提升了开发效率，其中Decorator（装饰器）便是一个十分实用的特性。接下来，咱们就深入探讨一下ES6 Decorator究竟是什么，该怎么使用，以及它常见的应用场景有哪些。

一、ES6 Decorator 是什么

ES6中的Decorator是一种设计模式，简单来说，它本质上就是一个函数。这个函数接收一个对象（通常是类或者类的属性）作为参数，经过一系列操作后，返回一个增强后的对象。借助Decorator，我们无需修改原有代码，就能给类或属性添加新功能，或者对现有功能进行修改，这种方式既灵活又优雅。

Decorator的概念和装饰者模式很相似。装饰者模式指的是在不改变原类结构，也不使用继承的情况下，能够动态地为对象扩展功能的设计理论。理解了装饰者模式，能帮助我们更好地掌握Decorator的原理。

二、ES6 Decorator 的用法

（一）类的装饰

先来看一个简单的例子，定义一个soldier类，此时这个士兵“一无所有”：

class soldier{
    // 类定义
}

接着，定义一个名为strong的函数，它就是我们的装饰器。这个装饰器的作用是让士兵获得AK装备：

function strong(target){
    // 执行一些操作，比如修改或增强类的行为
    target.AK = true
    // 返回修改后的类
    return target;
}

使用这个装饰器来增强soldier类：

@strong
class soldier{
}

经过装饰后，士兵就有了武器，通过soldier.AK访问，结果为true 。从这个例子可以看出，类的装饰器接收的参数就是类本身，通过对类进行修改和增强，返回一个具备新特性的类。

（二）类属性的装饰

当装饰类属性时，装饰器能接受三个参数：类的原型对象、需要装饰的属性名以及装饰属性名的描述对象。

下面定义一个readonly装饰器，它的作用是将属性设置为只读：

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

使用readonly装饰Person类的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 。所以在使用装饰器时，一定要避免对函数进行修饰。

三、ES6 Decorator 的使用场景

基于Decorator强大的功能，在实际开发中，它有着广泛的应用场景。下面为大家列举几个常见的场景。

（一）优化React Redux代码

在使用react-redux时，如果按照常规方式编写代码，会显得既不美观又繁琐。例如：

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

而借助装饰器，代码会变得简洁许多：

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

通过这种方式，代码结构更加清晰，可读性大大提高。

（二）简化mixins使用

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\"

在这个例子中，mixins装饰器将Foo对象的方法混入到MyClass类中，使MyClass的实例能够调用foo方法，简化了代码的编写过程。

（三）使用core – decorators.js 中的常见装饰器

core - decorators.js提供了一些实用的装饰器，下面为大家介绍几个。

1. @autobind装饰器：autobind装饰器的作用是让方法中的this对象绑定到原始对象，避免在函数调用时this指向出现问题。例如：

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

从代码执行结果可以看出，经过autobind装饰后，getPerson方法中的this成功绑定到了person对象。
2. @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]

当尝试修改被readonly装饰的entree属性时，就会报错，有效保护了属性的只读性。
3. @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: 功能废除了

通过这种方式，开发人员可以及时得知哪些方法即将被废弃，提前做好代码调整的准备。

通过以上内容，相信大家对ES6 Decorator有了更全面的理解，在日常开发中，合理运用Decorator可以让代码更加简洁、高效，提升开发体验。