摘要：裝飾者模式定義裝飾者模式能夠在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)像動(dòng)態(tài)的添加職責(zé)。與繼承相比，裝飾者是一種更輕便靈活的做法。

裝飾者(decorator)模式能夠在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)像動(dòng)態(tài)的添加職責(zé)。與繼承相比，裝飾者是一種更輕便靈活的做法。

在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)象動(dòng)態(tài)地添加一些額外職責(zé)

可以動(dòng)態(tài)的給某個(gè)對(duì)象添加額外的職責(zé)，而不會(huì)影響從這個(gè)類中派生的其它對(duì)象；

裝飾者模式的作用就是為對(duì)象動(dòng)態(tài)的加入某些行為。

在傳統(tǒng)面向?qū)ο笳Z(yǔ)言中，為對(duì)象添加功能常使用繼承
但是繼承有很多缺點(diǎn)：

超類子類強(qiáng)耦合，超類改變導(dǎo)致子類改變
超類內(nèi)部細(xì)節(jié)對(duì)子類可見(jiàn)，破壞了封裝性
完成功能復(fù)用同時(shí)，可能會(huì)創(chuàng)造大量子類

舉例：

var person = {
    name: "payen",
    sex: "male"
}
person.age = "20";

裝飾者模式是在不改變對(duì)象自身的基礎(chǔ)上
而我們改變了原對(duì)象 ，所以上面這個(gè)例子不是裝飾器

/*模擬傳統(tǒng)語(yǔ)言的裝飾者
 裝飾者模式將一個(gè)對(duì)象嵌入到另一個(gè)對(duì)象之中，
實(shí)際上相當(dāng)于這個(gè)對(duì)象被另一個(gè)對(duì)像包裝起來(lái)，形成一條包裝鏈。
請(qǐng)求隨著這條包裝鏈依次傳遞到所有的對(duì)象，每個(gè)對(duì)象都有處理這條請(qǐng)求的機(jī)會(huì)。
*/

//原始的飛機(jī)類
var Plan = function () {
};

Plan.prototype.fire = function () {
    console.log("發(fā)射普通子彈");
};


//裝飾類
var MissileDecorator = function (plan) {
    this.plan = plan;
};

MissileDecorator.prototype.fire = function () {
    this.plan.fire();
    console.log("發(fā)射導(dǎo)彈!");
};

var plan = new Plan();
plan = new MissileDecorator(plan);
plan.fire();

這樣給對(duì)象動(dòng)態(tài)的增加職責(zé)的方式就沒(méi)有改變對(duì)象自身
一個(gè)對(duì)象放入另一個(gè)對(duì)象
形成了一條裝飾鏈（一個(gè)聚合對(duì)象）
而上面的shot和track也就是是裝飾者、裝飾函數(shù)
當(dāng)函數(shù)執(zhí)行時(shí)，會(huì)把請(qǐng)求轉(zhuǎn)給鏈中的下一個(gè)對(duì)象

在JavaScript中，很容易給對(duì)象擴(kuò)展屬性與方法
但是卻不容易給函數(shù)擴(kuò)展額外功能，除非改函數(shù)源碼
但是改寫函數(shù)違反了開(kāi)放-封閉原則

var foo = function(){
    console.log(1);
}
//改為
var foo = function(){
    console.log(1);
    console.log(2);//增
}

一個(gè)常用的方法就是緩存函數(shù)引用，改寫函數(shù)

var foo = function(){
    console.log(1);
}
//改為
var foo = function(){
    console.log(1);
}
var _foo = foo;
foo = function(){
    _foo();
    console.log(2);
}

但是這樣寫還是存在問(wèn)題

*要維護(hù)額外的中間變量（_foo），如果裝飾鏈過(guò)長(zhǎng)，中間變量就會(huì)越來(lái)越多
可能會(huì)存在this被劫持問(wèn)題*
關(guān)于this劫持問(wèn)題，看下面的例子：

var getId = document.getElementById;
document.getElementById = function(ID){
    console.log(1);
    return getId(ID);
}
document.getElementById("demo");

因?yàn)槭褂?document.getElementById 的時(shí)候
內(nèi)部有this引用，而這個(gè)this期望指向的是document
但是 getId 在獲取了 document.getElementById 引用后
this就指向了window，導(dǎo)致拋出錯(cuò)誤

為了讓this正確指向document
我們可以做出修改:

    var getId = document.getElementById;
document.getElementById = function(ID){
    console.log(1);
    return getId.call(document, ID);
}
document.getElementById("demo");

AOP（Aspect Oriented Programming）面向切面編程 
把一些與核心業(yè)務(wù)邏輯無(wú)關(guān)的功能抽離出來(lái) 
再通過(guò)“動(dòng)態(tài)織入”方式摻入業(yè)務(wù)邏輯模塊

與業(yè)務(wù)邏輯無(wú)關(guān)的功能通常包括日志統(tǒng)計(jì)、安全控制、異常處理等等
好處也很明顯，保證了核心業(yè)務(wù)模塊的純凈與高內(nèi)聚性
而且其他的功能模塊也可以很好的復(fù)用
首先我們要實(shí)現(xiàn)兩個(gè)函數(shù)
一個(gè)用來(lái)前置裝飾，一個(gè)用來(lái)后置裝飾:

Function.prototype.before = function(beforeFunc){
    var that = this;
    return function(){
        beforeFunc.apply(this, arguments);
        return that.apply(this, arguments);
    }
}
Function.prototype.after = function(afterFunc){
    var that = this;
    return function(){
        var ret = that.apply(this, arguments);
        afterFunc.apply(this, arguments);
        return ret;
    }
}

以前置裝飾為例
調(diào)用before時(shí)，先把原函數(shù)的引用保存下來(lái)
然后返回一個(gè)“代理”函數(shù)
這樣在原函數(shù)調(diào)用前，先執(zhí)行擴(kuò)展功能的函數(shù)
而且他們共用同一個(gè)參數(shù)列表
后置裝飾與前置裝飾基本類似，只是執(zhí)行順序不同

如果不喜歡這種污染原型的方式，也可以這么寫:

var before = function(originFunc, beforeFunc){
    return function(){
        before.apply(this, arguments);
        return originFunc.apply(this, arguments);
    }
}
var after = function(originFunc, afterFunc){
    return function(){
        var ret = originFunc.apply(this, arguments);
        afterFunc.apply(this, arguments);
        return ret;
    }
}

使用這種AOP的方式可以完美的對(duì)函數(shù)進(jìn)行功能擴(kuò)展

var foobar = function(x, y, z){
    console.log(x, y, z);
}
var foo = function(x, y, z){
    console.log(x/10, y/10, z/10);
}
var bar = function(x, y, z){
    console.log(x*10, y*10, z*10);
}
foobar = foobar.before(foo).after(bar);
foobar(1, 2, 3);
//0.1 0.2 0.3
//1 2 3
//10 20 30

由于原函數(shù)和裝飾函數(shù)共用一個(gè)參數(shù)列表
所以我們可以用AOP改變函數(shù)參數(shù)

var data = {
    width: "100px",
    height: "100px"
}
var demo = function(data){
    console.log(JSON.stringify(data));
}
demo = demo.before(function(data){
    data.color = "red";
});
demo(data);
//{"width":"100px","height":"100px","color":"red"}

最后談一談裝飾者模式的缺點(diǎn)
它也不是十全十美的

裝飾鏈疊加了函數(shù)作用域，如果過(guò)長(zhǎng)也會(huì)產(chǎn)生性能問(wèn)題
如果原函數(shù)上保存了屬性，返回新函數(shù)后屬性會(huì)丟失

var demo = function(){
    console.log(1);
}
demo.a = 123;
demo = demo.after(function(){
    console.log(2);
});
demo();
console.log(demo.a);
//undefined

裝飾者模式在開(kāi)發(fā)中非常有用，在框架開(kāi)發(fā)中也十分有用