什么是裝飾者模式

當我們拍了一張照片準備發朋友圈時，許多小伙伴會選擇給照片加上濾鏡。同一張照片、不同的濾鏡組合起來就會有不同的體驗。這里實際上就應用了裝飾者模式：是通過濾鏡裝飾了照片。在不改變對象（照片）的情況下動態的為其添加功能（濾鏡）。

需要注意的是：由于 JavaScript 語言動態的特性，我們很容易就能改變某個對象（JavaScript 中函數是一等公民）。但是我們要盡量避免直接改寫某個函數，這會導致代碼的可維護性、可擴展性變差，甚至會污染其他業務。

什么是 AOP

想必大家對"餐前洗手、飯后漱口"都不陌生。這句標語其實就是 AOP 在生活中的例子：吃飯這個動作相當于切點，我們可以在這個切點前、后插入其它如洗手等動作。

AOP（Aspect-Oriented Programming）：面向切面編程，是對 OOP 的補充。利用AOP可以對業務邏輯的各個部分進行隔離，也可以隔離業務無關的功能比如日志上報、異常處理等，從而使得業務邏輯各部分之間的耦合度降低，提高業務無關的功能的復用性，也就提高了開發的效率。

在 JavaScript 中，我們可以通過裝飾者模式來實現 AOP，但是兩者并不是一個維度的概念。 AOP 是一種編程范式，而裝飾者是一種設計模式。

ES3 下裝飾者的實現

了解了裝飾者模式和 AOP 的概念之后，我們寫一段能夠兼容 ES3 的代碼來實現裝飾者模式：

// 原函數var takePhoto =function(){console.log('拍照片');}// 定義 aop 函數var after=function( fn, afterfn ){ return function(){let res = fn.apply( this, arguments ); afterfn.apply( this, arguments );return res;}}// 裝飾函數var addFilter=function(){console.log('加濾鏡');}// 用裝飾函數裝飾原函數takePhoto=after(takePhoto,addFilter);takePhoto();

這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過aop函數after來添加。

ES5 下裝飾者的實現

在 ES5 中引入了Object.defineProperty，我們可以更方便的給對象添加屬性：

let takePhoto = function () {console.log('拍照片');}// 給 takePhoto 添加屬性 afterObject.defineProperty(takePhoto, 'after', {writable: true,value: function () {console.log('加濾鏡');},});// 給 takePhoto 添加屬性 beforeObject.defineProperty(takePhoto, 'before', {writable: true,value: function () {console.log('打開相機');},});// 包裝方法let aop = function (fn) {return function () {fn.before()fn()fn.after()}}takePhoto = aop(takePhoto)takePhoto()

基于原型鏈和類的裝飾者實現

我們知道，在 JavaScript 中，函數也好，類也好都有著自己的原型，通過原型鏈我們也能夠很方便的動態擴展，以下是基于原型鏈的寫法：