什么是Decorator
装饰器（Decorator）是一个函数，用来修改类的行为。
装饰器对类的行为的改变，是diamante编译时发生的，而不是在运行时，这意味着，装饰器能在编译阶段运行代码。
Decorator的作用
简单来说， Decorator 就是一种动态地往一个类中添加新的行为的设计模式， 它可以在类运行时， 扩展一个类的功能， 并且去修改类本身的属性和方法， 使其可以再不同类之间更灵活的共用一些属性和方法。
function testable(target){
target.inTestable = true;
}
@testable
class MyTestableClass{}
console.log(MyTestableClass.inTestable); // true
上面代码中， @testable就是一个装饰器。 它修改了MyTestableClass这个类的行为，为它加上了静态属性inTestable
基本上，装饰器的行为就是下面这样：
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
也就是说， 装饰器本质就是编译时执行的函数
装饰器函数的第一个参数，就是索要装饰的目标类。
function testable(target){
...
}
上面代码中，testable函数的参数target, 就是会被装饰的类。
如果一个参数不够用，可以在装饰器外面再封装一层函数。
// 装饰器函数传参数
function testable(isTestable){
return function(target){
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass{}
console.log(MyTestableClass.isTestable); // true
@testable(false)
class MyTestableClass{}
console.log(MyTestableClass.isTestable); // false
上面代码中， 装饰器testable可以接收参数， 这就等于可以修改装饰器的行为。
前面的例子是为类添加一个静态属性。如果想添加实例属性， 可以通过目标类的prototype对象操作：
function testable(target){
target.prototype.isTestable = true;
}
@testable
class MyTestableClass{}
let obj = new MyTestableClass();
console.log(obj.isTestable); // true
上面代码中，装饰器函数testable是在目标类的prototype对象上添加属性， 因此就可以再实例上调用。
下面是另外一个例子
// mixins.js
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js
import { mixins } from './mixins'
const Foo = {
foo(){
console.log('foo');
}
}
@mixins(Foo)
class MyClass{}
let obj = new MyClass();
obj.foo();
上面代码通过装饰器mixins， 把Foo类的方法添加到了MyClass的实例上面。 可以用Object.assign()模拟这个功能。
// 通过Object.assign() 模拟mixins装饰器
const Foo = {
foo(){
console.log('foo');
}
}
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo();
为什么说Decorator可以再运行时修改类或类的属性？ 主要是通过装饰器函数的返回值决定的
Decorator的返回值表示新的构造方法。 在使用babel-plugin-transform-decorators-legacy的情况下，如果返回值是null/undefined/false/NaN/0/则会使用原本的构造函数
image.png
例如使用构造器，我们可以将小汽车动态改变为自行车
function log(target,name,descriptor){
return class Bike{
run(){
console.log('Bike is running');
}
}
}
@log
class Car {
run() {
console.log('Car is running');
}
}
let car = new Car();
car.run(); // Bike is running
装饰器不仅可以装饰类， 还可以装饰类的属性\方法
此时，装饰函数接受三个参数：
- 第一个参数是所要装饰的目标对象
- 第二个参数是所要装饰的属性名
- 第三个参数是该属性的描述对象
类似 Object.defineprototype()方法
https://www.jianshu.com/p/8fd3b3ebcffb
Decorator函数的返回值表示新的成员属性。如果返回值是null/undefined/false/NaN/0/则会返回原本的成员属性
Decorator在babel-plugin-transform-decorators-legacy 的情况下对成员属性的动态修改实际上是通过 defineProperty实现的。
如果被装饰的成员是函数，则第三个参数的value字段表示这个函数本身。
**1. 日志输出**
// 日志输出
function log(target,name,descriptor){
console.log(Date.now());
}
class Car {
@log
run(){
console.log('Car is running');
}
}
const c1 = new Car();
c1.run();
// 1562311252864
// Car is running
**2. 函数劫持**
// 函数劫持
function log(target,name,descriptor){
const old = descriptor.value;
descriptor.value = function(...arg){// 注意这里需要保留原this作用域，不能使用箭头函数
console.log('哈哈哈哈哈被劫持啦');
return old.apply(this,arg);
}
}
class Car {
@log
run(){
console.log('Car is running');
}
}
const c1 = new Car();
c1.run();
// 哈哈哈哈哈被劫持啦
// Car is running
// 装饰器 装饰属性
class Math {
@log
add(a,b){
return a + b;
}
}
function log(target, name, descriptor){
var oldValue = descriptor.value;
descriptor.value = function(){
console.log(`Calling "${name}" with`, arguments);
return oldValue.apply(null, arguments);
}
return descriptor;
}
const math = new Math();
console.log(math.add(2,4))
image.png
这里log装饰器的作用就是在执行原始的操作之前，执行一次console.log，从而达到输出日志的目的
这里的log函数最后返回descriptor， 是被装饰过的全新的descriptor。
装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
demo
示例场景：
- 创建一个普通Man类， 它的防御值为2， 攻击力为3， 血量为3
- 然后让其带上钢铁侠的盔甲，这样他的抵御力增加100， 变成102
- 让其带上光束首套，攻击力增加50， 变成53
- 最后让他增加“飞行”能力
创建Man类
class Man {
constructor(a=2,b=3,c=3){
this.init(a,b,c);
}
init(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
toString(){
return `a:${this.a},b:${this.b},c:${this.c}`
}
}
let tony = new Man();
console.log(`${tony}`) // a:2,b:3,c:3
为钢铁侠配盔甲，创建decorateArmour方法，注意该方法是装饰在方法init上
// 方法/属性 装饰器
function decorateArmour(target, key, descriptor){
const method = descriptor.value;
let moreDef = 100;
let ret;
descriptor.value = (...args) => {
// console.log(...args);
args[0] += moreDef;
ret = method.apply(target, args);
return ret;
}
return descriptor // 有return， 则返回全新的属性/
}
class Man {
constructor(a=2,b=3,c=3){
this.init(a,b,c);
}
@decorateArmour
// @decorateLight
init(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
toString(){
return `a:${this.a},b:${this.b},c:${this.c}`
}
}
let tony = new Man();
console.log(`${tony}`) // a:102,b:3,c:3
装饰器叠加：增加光束手套
在上面示例中，我们成功为普通人增加"盔甲"这个装饰，现在再给它增加“光束手套”，希望额外增加50点防御值
// 方法/属性 装饰器
function decorateArmour(target, key, descriptor){
const method = descriptor.value;
let moreDef = 100;
let ret;
descriptor.value = (...args) => {
// console.log(...args);
args[0] += moreDef;
ret = method.apply(target, args);
return ret;
}
return descriptor // 有return， 则返回全新的属性/
}
// 方法/属性 装饰器
function decorateLight(target, key, descriptor){
const method = descriptor.value;
descriptor.value = (...args) => {
args[1] += 50;
return method.apply(target, args);
// target.constructor.prototype.a = 'aaa'
}
console.log(descriptor);
return descriptor; // 有return， 则返回全新的属性/方法
}
class Man {
constructor(a=2,b=3,c=3){
this.init(a,b,c);
}
@decorateArmour
@decorateLight
init(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
toString(){
return `a:${this.a},b:${this.b},c:${this.c}`
}
}
let tony = new Man();
console.log(`${tony}`) // a:102,b:53,c:3
到这里就能看出装饰模式的优势了，它可以对某个方法进行叠加使用，对原类的侵入性非常小，只是增加了一行@decorateLight而已，可以方便的增删，（同时还可以复用）
对类的装饰：增加飞行能力
// 方法/属性 装饰器
function decorateArmour(target, key, descriptor){
const method = descriptor.value;
let moreDef = 100;
let ret;
descriptor.value = (...args) => {
// console.log(...args);
args[0] += moreDef;
ret = method.apply(target, args);
return ret;
}
return descriptor // 有return， 则返回全新的属性/
}
// 方法/属性 装饰器
function decorateLight(target, key, descriptor){
const method = descriptor.value;
descriptor.value = (...args) => {
args[1] += 500;
return method.apply(target, args);
// target.constructor.prototype.a = 'aaa'
}
console.log(descriptor);
return descriptor; // 有return， 则返回全新的属性/方法
}
// 类 装饰器
function addFly(canFly){
return function(target){
let targetPro = target.prototype;
targetPro.canFly = canFly;
let extra = canFly ? '(技能加成：飞行能力)' : '';
let method = target.prototype.toString;
targetPro.toString = (...args) => {
return method.apply(targetPro,args)+extra
}
return target; // 注意，如果这里有return,这里返回了一个全新的类
}
}
@addFly(true)
class Man {
constructor(a=2,b=3,c=3){
this.init(a,b,c);
}
@decorateArmour
@decorateLight
init(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
toString(){
return `a:${this.a},b:${this.b},c:${this.c}`
}
}
let tony = new Man();
console.log(`${tony}`) // a:102,b:503,c:3(技能加成：飞行能力)
使用原生JS实现装饰器模式
关键点：
- Man是具体的类，Decorator是针对Man的装饰器基类
- 具体的装饰类DecorateArmour典型地使用prototype继承方式继承自Decorator基类
- 基于IOC（控制反转）思想，Decorator是接收Man类， 而不是自己创建Man类
// 首先我们要创建一个基类
function Man(){
this.def = 2;
this.atk = 3;
this.hp = 3;
}
// 装饰者也需要实现这些方法，遵守 Man 的接口
Man.prototype={
toString:function(){
return `防御力:${this.def},攻击力:${this.atk},血量:${this.hp}`;
}
}
// 创建装饰器，接收 Man 对象作为参数。
var Decorator = function(man){
this.man = man;
}
// 装饰者要实现这些相同的方法
Decorator.prototype.toString = function(){
return this.man.toString();
}
// 继承自装饰器对象
// 创建具体的装饰器，也是接收 Man 作对参数
var DecorateArmour = function(man){
var moreDef = 100;
man.def += moreDef;
Decorator.call(this,man);
}
DecorateArmour.prototype = new Decorator();
// 接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。
DecorateArmour.prototype.toString = function(){
return this.man.toString();
}
// 注意这里的调用方式
// 构造器相当于“过滤器”，面向切面的
var tony = new Man();
tony = new DecorateArmour(tony);
console.log(`当前状态 ===> ${tony}`);
// 输出：当前状态 ===> 防御力:102,攻击力:3,血量:3
经典实现：Logger 日志系统
/**
* Created by jscon on 15/10/16.
*/
let log = (type) => {
return (target, name, descriptor) => {
const method = descriptor.value;
descriptor.value = (...args) => {
console.info(`(${type}) 正在执行: ${name}(${args}) = ?`);
let ret;
try {
ret = method.apply(target, args);
console.info(`(${type}) 成功 : ${name}(${args}) => ${ret}`);
} catch (error) {
console.error(`(${type}) 失败: ${name}(${args}) => ${error}`);
}
return ret;
}
}
}
class IronMan {
@log('IronMan 自检阶段')
check(){
return '检查完毕';
}
@log('IronMan 攻击阶段')
attack(){
return '击倒敌人';
}
@log('IronMan 机体报错')
error(){
throw 'Something is wrong!';
}
}
var tony = new IronMan();
tony.check();
tony.attack();
tony.error();
// 输出：
// (IronMan 自检阶段) 正在执行: check() = ?
// (IronMan 自检阶段) 成功 : check() => 检查完毕
// (IronMan 攻击阶段) 正在执行: attack() = ?
// (IronMan 攻击阶段) 成功 : attack() => 击倒敌人
// (IronMan 机体报错) 正在执行: error() = ?
// (IronMan 机体报错) 失败: error() => Something is wrong!
Logger方法的关键在于：
- 首先使用const method = descriptor.value; 将原有方法提取出来，保障原有方法的纯净；
- 在try ..catch语句是调用 ret = method.apply(target,arg);在调用之前之后分别进行日志汇报
- 最后返回return ret; 原始的调用结果
装饰器Decorator是ES7的一个提案， 目前Babel转码器已经支持，
首先，安装babel-core和babel-plugin-transform-decorators.
$ npm install babel-core babel-plugin-transform-decorators
然后配置文件.babelrc
{
"plugins": ["transform-decorators"]
}
这是，Babel就可以对Decorator转码了
