如何在JavaScript中使用裝飾器函數

今天就跟大家聊聊有關如何在JavaScript中使用裝飾器函數，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

具體如下：

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

下面給出幾個常用的裝飾器函數示例，相關代碼請查看github。

1 動態添加onload監聽函數

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 前置執行函數和后置執行函數

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');

執行結果，控制臺打印如下：

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

3 函數執行時間計算

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）語法，如果你感興趣可以查看前面關于ES6的相關內容。

看完上述內容，你們對如何在JavaScript中使用裝飾器函數有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。