什么是Decorator
裝飾器（Decorator）是一個(gè)函數(shù)桐汤，用來(lái)修改類的行為宗挥。
裝飾器對(duì)類的行為的改變，是diamante編譯時(shí)發(fā)生的从诲，而不是在運(yùn)行時(shí)左痢，這意味著，裝飾器能在編譯階段運(yùn)行代碼。
Decorator的作用
簡(jiǎn)單來(lái)說(shuō)抖锥， Decorator 就是一種動(dòng)態(tài)地往一個(gè)類中添加新的行為的設(shè)計(jì)模式亿眠， 它可以在類運(yùn)行時(shí)， 擴(kuò)展一個(gè)類的功能磅废， 并且去修改類本身的屬性和方法纳像， 使其可以再不同類之間更靈活的共用一些屬性和方法。
function testable(target){
target.inTestable = true;
}
@testable
class MyTestableClass{}
console.log(MyTestableClass.inTestable); // true
上面代碼中拯勉， @testable就是一個(gè)裝飾器竟趾。 它修改了MyTestableClass這個(gè)類的行為，為它加上了靜態(tài)屬性inTestable
基本上宫峦，裝飾器的行為就是下面這樣：
@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
也就是說(shuō)岔帽， 裝飾器本質(zhì)就是編譯時(shí)執(zhí)行的函數(shù)
裝飾器函數(shù)的第一個(gè)參數(shù)，就是索要裝飾的目標(biāo)類导绷。
function testable(target){
...
}
上面代碼中犀勒，testable函數(shù)的參數(shù)target, 就是會(huì)被裝飾的類。
如果一個(gè)參數(shù)不夠用妥曲，可以在裝飾器外面再封裝一層函數(shù)贾费。
// 裝飾器函數(shù)傳參數(shù)
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可以接收參數(shù)檐盟， 這就等于可以修改裝飾器的行為褂萧。
前面的例子是為類添加一個(gè)靜態(tài)屬性。如果想添加實(shí)例屬性葵萎， 可以通過(guò)目標(biāo)類的prototype對(duì)象操作：
function testable(target){
target.prototype.isTestable = true;
}
@testable
class MyTestableClass{}
let obj = new MyTestableClass();
console.log(obj.isTestable); // true
上面代碼中导犹，裝飾器函數(shù)testable是在目標(biāo)類的prototype對(duì)象上添加屬性， 因此就可以再實(shí)例上調(diào)用羡忘。
下面是另外一個(gè)例子
// 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();
上面代碼通過(guò)裝飾器mixins谎痢， 把Foo類的方法添加到了MyClass的實(shí)例上面。 可以用Object.assign()模擬這個(gè)功能卷雕。
// 通過(guò)Object.assign() 模擬mixins裝飾器
const Foo = {
foo(){
console.log('foo');
}
}
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo();
為什么說(shuō)Decorator可以再運(yùn)行時(shí)修改類或類的屬性舶得？ 主要是通過(guò)裝飾器函數(shù)的返回值決定的
Decorator的返回值表示新的構(gòu)造方法。 在使用babel-plugin-transform-decorators-legacy的情況下爽蝴，如果返回值是null/undefined/false/NaN/0/則會(huì)使用原本的構(gòu)造函數(shù)
例如使用構(gòu)造器，我們可以將小汽車動(dòng)態(tài)改變?yōu)樽孕熊?/p>
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
裝飾器不僅可以裝飾類纫骑， 還可以裝飾類的屬性\方法
此時(shí)蝎亚，裝飾函數(shù)接受三個(gè)參數(shù)：
- 第一個(gè)參數(shù)是所要裝飾的目標(biāo)對(duì)象
- 第二個(gè)參數(shù)是所要裝飾的屬性名
- 第三個(gè)參數(shù)是該屬性的描述對(duì)象
類似 Object.defineprototype()方法
http://www.reibang.com/p/8fd3b3ebcffb
Decorator函數(shù)的返回值表示新的成員屬性。如果返回值是null/undefined/false/NaN/0/則會(huì)返回原本的成員屬性
Decorator在babel-plugin-transform-decorators-legacy 的情況下對(duì)成員屬性的動(dòng)態(tài)修改實(shí)際上是通過(guò) defineProperty實(shí)現(xiàn)的先馆。
如果被裝飾的成員是函數(shù)发框，則第三個(gè)參數(shù)的value字段表示這個(gè)函數(shù)本身。
**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. 函數(shù)劫持**
// 函數(shù)劫持
function log(target,name,descriptor){
const old = descriptor.value;
descriptor.value = function(...arg){// 注意這里需要保留原this作用域煤墙，不能使用箭頭函數(shù)
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))
這里log裝飾器的作用就是在執(zhí)行原始的操作之前梅惯，執(zhí)行一次console.log宪拥，從而達(dá)到輸出日志的目的
這里的log函數(shù)最后返回descriptor， 是被裝飾過(guò)的全新的descriptor铣减。
裝飾器只能用于類和類的方法她君，不能用于函數(shù)，因?yàn)榇嬖诤瘮?shù)提升
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
demo
示例場(chǎng)景：
- 創(chuàng)建一個(gè)普通Man類葫哗， 它的防御值為2缔刹， 攻擊力為3， 血量為3
- 然后讓其帶上鋼鐵俠的盔甲劣针，這樣他的抵御力增加100校镐， 變成102
- 讓其帶上光束首套，攻擊力增加50捺典， 變成53
- 最后讓他增加“飛行”能力
創(chuàng)建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
為鋼鐵俠配盔甲鸟廓，創(chuàng)建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
裝飾器疊加：增加光束手套
在上面示例中引谜，我們成功為普通人增加"盔甲"這個(gè)裝飾，現(xiàn)在再給它增加“光束手套”稀蟋，希望額外增加50點(diǎn)防御值
// 方法/屬性 裝飾器
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
到這里就能看出裝飾模式的優(yōu)勢(shì)了退客，它可以對(duì)某個(gè)方法進(jìn)行疊加使用骏融，對(duì)原類的侵入性非常小，只是增加了一行@decorateLight而已萌狂，可以方便的增刪档玻，（同時(shí)還可以復(fù)用）
對(duì)類的裝飾：增加飛行能力
// 方法/屬性 裝飾器
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,這里返回了一個(gè)全新的類
}
}
@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實(shí)現(xiàn)裝飾器模式
關(guān)鍵點(diǎn)：
- Man是具體的類，Decorator是針對(duì)Man的裝飾器基類
- 具體的裝飾類DecorateArmour典型地使用prototype繼承方式繼承自Decorator基類
- 基于IOC（控制反轉(zhuǎn)）思想务傲，Decorator是接收Man類凉当， 而不是自己創(chuàng)建Man類
// 首先我們要?jiǎng)?chuàng)建一個(gè)基類
function Man(){
this.def = 2;
this.atk = 3;
this.hp = 3;
}
// 裝飾者也需要實(shí)現(xiàn)這些方法，遵守 Man 的接口
Man.prototype={
toString:function(){
return `防御力:${this.def},攻擊力:${this.atk},血量:${this.hp}`;
}
}
// 創(chuàng)建裝飾器售葡，接收 Man 對(duì)象作為參數(shù)看杭。
var Decorator = function(man){
this.man = man;
}
// 裝飾者要實(shí)現(xiàn)這些相同的方法
Decorator.prototype.toString = function(){
return this.man.toString();
}
// 繼承自裝飾器對(duì)象
// 創(chuàng)建具體的裝飾器，也是接收 Man 作對(duì)參數(shù)
var DecorateArmour = function(man){
var moreDef = 100;
man.def += moreDef;
Decorator.call(this,man);
}
DecorateArmour.prototype = new Decorator();
// 接下來(lái)我們要為每一個(gè)功能創(chuàng)建一個(gè)裝飾者對(duì)象挟伙，重寫(xiě)父級(jí)方法楼雹，添加我們想要的功能。
DecorateArmour.prototype.toString = function(){
return this.man.toString();
}
// 注意這里的調(diào)用方式
// 構(gòu)造器相當(dāng)于“過(guò)濾器”，面向切面的
var tony = new Man();
tony = new DecorateArmour(tony);
console.log(`當(dāng)前狀態(tài) ===> ${tony}`);
// 輸出：當(dāng)前狀態(tài) ===> 防御力:102,攻擊力:3,血量:3
經(jīng)典實(shí)現(xiàn)：Logger 日志系統(tǒng)
/**
* Created by jscon on 15/10/16.
*/
let log = (type) => {
return (target, name, descriptor) => {
const method = descriptor.value;
descriptor.value = (...args) => {
console.info(`(${type}) 正在執(zhí)行: ${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 機(jī)體報(bào)錯(cuò)')
error(){
throw 'Something is wrong!';
}
}
var tony = new IronMan();
tony.check();
tony.attack();
tony.error();
// 輸出：
// (IronMan 自檢階段) 正在執(zhí)行: check() = ?
// (IronMan 自檢階段) 成功 : check() => 檢查完畢
// (IronMan 攻擊階段) 正在執(zhí)行: attack() = ?
// (IronMan 攻擊階段) 成功 : attack() => 擊倒敵人
// (IronMan 機(jī)體報(bào)錯(cuò)) 正在執(zhí)行: error() = ?
// (IronMan 機(jī)體報(bào)錯(cuò)) 失敗: error() => Something is wrong!
Logger方法的關(guān)鍵在于：
- 首先使用const method = descriptor.value; 將原有方法提取出來(lái)贮缅，保障原有方法的純凈榨咐；
- 在try ..catch語(yǔ)句是調(diào)用 ret = method.apply(target,arg);在調(diào)用之前之后分別進(jìn)行日志匯報(bào)
- 最后返回return ret; 原始的調(diào)用結(jié)果
裝飾器Decorator是ES7的一個(gè)提案， 目前Babel轉(zhuǎn)碼器已經(jīng)支持谴供，
首先块茁，安裝babel-core和babel-plugin-transform-decorators.
$ npm install babel-core babel-plugin-transform-decorators
然后配置文件.babelrc
{
"plugins": ["transform-decorators"]
}
這是，Babel就可以對(duì)Decorator轉(zhuǎn)碼了
