裝飾者模式能夠在不改變物件自身的基礎上，在程式執行期間給物件動態地新增職責

示例一：頁面中有一個登入 button，點選這個 button會彈出登入浮層，與此同時要進行資料上報，
來統計有多少使用者點選了這個登入 button

<button id="button" tag="loginBtn">點選</button>

Function.prototype.after = function(afterfn) {
  var __self = this;
  return function() {
    var ret = __self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  }
};

var showLogin = function() {
  console.log('開啟登入浮層');
}

var log = function() {
  console.log('上報標籤為: ' + this.getAttribute('tag'));
}

showLogin = showLogin.after(log); // 開啟登入浮層之後上報資料

document.getElementById('button').onclick = showLogin;
 

示例二：在使用AJAX請求資料時，經常遇到部分介面需要Token的情況，這種情況也可以用裝飾者模式

// aiax
var ajax = function(type, url, param) {
  console.log(param); // 傳送 ajax 請求的程式碼略
};

var getToken = function() {
  return 'Token';
}

// 動態新增token
ajax = ajax.before(function(type, url, param) {
  param.Token = getToken();
});

ajax('get', 'http:// xxx.com/userinfo', { name: 'sven' });