章
目
录
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提供了一些实用的装饰器，下面为大家介绍几个。
- @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可以让代码更加简洁、高效，提升开发体验。
