介绍
在ES6(ECMAScript 2015)中,Decorator是一种设计模式,它提供了一种优雅的方式来扩展或修改类和属性的行为
。Decorator本质上是一个函数
,它接收一个对象(
通常是类或者类的属性)作为参数,然后返回一个增强后的对象
。这种模式允许你在不修改原有代码的情况下,添加新的功能或者修改现有功能。
Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式
简单来讲,装饰者模式就是一种在不改变原类
和使用继承
的情况下,动态地扩展对象功能
的设计理论。
用法
这里定义一个士兵,这时候他什么装备都没有
kotlin
class soldier{
// 类定义
}
定义一个得到 AK 装备的函数,即装饰器
javascript
function strong(target){
// 执行一些操作,比如修改或增强类的行为
target.AK = true
// 返回修改后的类
return target;
}
使用该装饰器对士兵进行增强
kotlin
@strong
class soldier{
}
这时候士兵就有武器了
arduino
soldier.AK // true
Docorator
修饰对象为下面两种:
- 类的装饰
- 类属性的装饰
类的装饰
当对类本身进行装饰的时候,能够接受一个参数,即类本身 如上述代码
类属性的装饰
当对类属性进行装饰的时候,能够接受三个参数:
- 类的原型对象
- 需要装饰的属性名
- 装饰属性名的描述对象
首先定义一个 readonly
装饰器
bash
function readonly(target, name, descriptor){
descriptor.writable = false; // 将可写属性设为false
return descriptor;
}
使用 readonly
装饰类的 name
方法
typescript
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
相当于以下调用
bash
readonly(Person.prototype, 'name', descriptor);
如果一个方法有多个装饰器,就像洋葱一样,先从外到内进入,再由内到外执行
less
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)
先执行
注意
装饰器不能用于修饰函数,因为函数存在变量声明情况
ini
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
编译阶段,变成下面
ini
var counter;
var add;
@add
function foo() {
}
counter = 0;
add = function () {
counter++;
};
意图是执行后 counter
等于 1,但是实际上结果是 counter
等于 0
使用场景
基于 Decorator
强大的作用,我们能够完成各种场景的需求,下面简单列举几种:
使用 react-redux
的时候,如果写成下面这种形式,既不雅观也很麻烦
scala
class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
通过装饰器就变得简洁多了
scala
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
将 mixins
,也可以写成装饰器,让使用更为简洁了
javascript
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
对象,绑定原始对象
typescript
import { autobind } from 'core-decorators';
class Person {
@autobind
getPerson() {
return this;
}
}
let person = new Person();
let getPerson = person.getPerson;
getPerson() === person;
// true
@readonly
readonly
装饰器使得属性或方法不可写
ini
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
装饰器在控制台显示一条警告,表示该方法将废除
less
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: 功能废除了