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

2019-11-19 16:58:28

字體：大中小

供稿：網(wǎng)友

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

裝飾器函數(shù)(Decorator)用于給對象在運行期間動態(tài)的增加某個功能，職責(zé)等。相較通過繼承的方式來擴(kuò)充對象的功能，裝飾器顯得更加靈活，首先，我們可以動態(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 oldI am AndyI am AndyI 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)容。