快捷導(dǎo)航

JavaScript裝飾器函數(shù)(Decorator)實例詳解

更新時間：2017年03月30日 12:00:00 作者：柒青衿

這篇文章主要介紹了JavaScript裝飾器函數(shù)(Decorator),結(jié)合實例形式分析了JavaScript裝飾器函數(shù)(Decorator)的功能、實現(xiàn)與使用方法,需要的朋友可以參考下

本文實例講述了JavaScript裝飾器函數(shù)(Decorator)。分享給大家供大家參考，具體如下：

裝飾器函數(shù)(Decorator)用于給對象在運行期間動態(tài)的增加某個功能，職責(zé)等。相較通過繼承的方式來擴充對象的功能，裝飾器顯得更加靈活，首先，我們可以動態(tài)給對象選定某個裝飾器，而不用hardcore繼承對象來實現(xiàn)某個功能點。其次：繼承的方式可能會導(dǎo)致子類繁多，僅僅為了增加某一個單一的功能點，顯得有些多余了。

下面給出幾個常用的裝飾器函數(shù)示例，相關(guān)代碼請查看github。

1 動態(tài)添加onload監(jiān)聽函數(shù)

function addLoadEvent(fn) {
  var oldEvent = window.onload;
  if(typeof window.onload != 'function') {
    window.onload = fn;
  }else {
    window.onload = function() {
      oldEvent();
      fn();
    };
  }
}
function fn1() {
  console.log('onloadFunc 1');
}
function fn2() {
  console.log('onloadFunc 2');
}
function fn3() {
  console.log('onloadFunc 3');
}
addLoadEvent(fn1);
addLoadEvent(fn2);
addLoadEvent(fn3);

2 前置執(zhí)行函數(shù)和后置執(zhí)行函數(shù)

Function.prototype.before = function(beforfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    beforfunc.apply(this, innerArgs);
    self.apply(this, outerArgs);
  };
};
Function.prototype.after = function(afterfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    self.apply(this, outerArgs);
    afterfunc.apply(this, innerArgs);
  };
};
var func = function(name){
  console.log('I am ' + name);
};
var beforefunc = function(age){
  console.log('I am ' + age + ' years old');
};
var afterfunc = function(gender){
  console.log('I am a ' + gender);
};
var beforeFunc = func.before(beforefunc, 'Andy');
var afterFunc = func.after(afterfunc, 'Andy');
beforeFunc('12');
afterFunc('boy');

執(zhí)行結(jié)果，控制臺打印如下：

I am 12 years old
I am Andy
I am Andy
I am a boy

3 函數(shù)執(zhí)行時間計算

function log(func){
  return function(...args){
    const start = Date.now();
    let result = func(...args);
    const used = Date.now() - start;
    console.log(`call ${func.name} (${args}) used ${used} ms.`);
    return result;
  };
}
function calculate(times){
  let sum = 0;
  let i = 1;
  while(i < times){
    sum += i;
    i++;
  }
  return sum;
}
runCalculate = log(calculate);
let result = runCalculate(100000);
console.log(result);

注：這里我使用了ES2015（ES6）語法，如果你感興趣可以查看前面關(guān)于ES6的相關(guān)內(nèi)容。