JavaScript の関数 Decorator の例の詳細な説明

この記事では主に JavaScript デコレータ関数 (Decorator) を紹介し、サンプルの形で JavaScript デコレータ関数 (Decorator) の機能、実装、使用法を分析します。例付き 関数(デコレータ)。参考のために皆さんと共有してください。詳細は次のとおりです:

デコレータ関数 (Decorator) は、実行時にオブジェクトに特定の機能、責任などを動的に追加するために使用されます。継承を通じてオブジェクトの機能を拡張する場合と比較して、デコレーターはより柔軟です。まず、オブジェクトを厳密に継承して特定の機能ポイントを実装するのではなく、オブジェクトのデコレーターを動的に選択できます。第 2 に、継承メソッドにより多数のサブクラスが生成される可能性があり、単一の関数ポイントを追加するだけでは少し冗長になります。

一般的に使用されるデコレータ関数の例を以下に示します。関連コードについては github を確認してください。

1 onload listen 関数を動的に追加します

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

実行結果、コンソールには以下が出力されます:

3 機能実行時間の計算

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

注: ここでは ES2015 (ES6) の構文を使用しました。興味がある場合は、ES6 に関する以前の関連コンテンツを確認してください。

もちろん、デコレーター関数はこれらの用途に限定されません。 Tmall で使用される Nodejs フレームワーク Koa は、デコレータ関数と ES2015 Generator に基づいています。この記事が、よりエレガントな JS コードを作成するための出発点として役立つことを願っています。

以上がJavaScript の関数 Decorator の例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。