JavaScriptデコレータパターンとプロキシパターンの機能の違いの詳細例

装飾されたパターンは、このクラスから派生した他のオブジェクトに影響を与えることなく、オブジェクトに追加の責任を動的に追加できます。

装飾されたパターンは、あるオブジェクトを別のオブジェクトに埋め込みます。これは、実際には、このオブジェクトが別のオブジェクトによってラップされ、パッケージ化チェーンを形成するのと同等です。

元の関数を変更せずに関数にいくつかの追加関数を追加します

1. 元の参照を保存します

window.onload = function() {
  console.log(1);
};

var _onload = window.onload || function() {};

window.onload = function() {
  _onload();
  console.log(2);
}

問題:
(1) 中間変数を維持する必要があります
(2) ) window.onload の例では、通常の関数 _onload を呼び出すときも window.onload を呼び出すときと同様に window を指すため、そのような問題は発生しません。

2. これはハイジャックされます:

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById(id);
}

return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”

_getElementById はグローバル関数であるため、グローバル関数が呼び出されるとき、これはウィンドウを指し、document.getElementById の this はウィンドウを指すことが期待されます。書類。

3. これのハイジャックを解決します:

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById.call(document, id);
}

AOPを使用して関数を装飾します

/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
  var _self = this;
  return function() {
    beforefn.apply(this, arguments);  // 新函数接收的参数会被原封不动的传入原函数
    return _self.apply(this, arguments);
  };
};

/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
  var _self = this;
  return function() {
    var ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = document.getElementById.before(function() {
  console.log(1);
});

プロトタイプを汚染しないようにしてください

var before = function(fn, beforefn) {
  return function() {
    beforefn.apply(this, arguments);
    return fn.apply(this, arguments);
  };
};

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

document.getElementById = before(document.getElementById, function(){
  console.log(1);
});

デコレータ パターンとプロキシ パターン

同じこと: どちらのパターンも、オブジェクトにある程度の間接参照を提供する方法を記述しており、その実装部分は別のオブジェクトへの参照を保持し、そのオブジェクトへの参照を提供します。リクエストを送信します。

相違点:
(1) プロキシ モード: 直接ローカル アクセスが不便な場合、またはニーズを満たさない場合、このオントロジーの代替手段を提供します。主要な機能をローカルで定義すると、エージェントはその機能へのアクセスを提供または拒否したり、オントロジーにアクセスする前に追加の処理を行ったりします。 (それでもオントロジーと同じことを行います)
(2) Decorator モード: オブジェクトにビヘイビアーを動的に追加します。 (最初にオブジェクトのすべての機能を決定したり、実際にオブジェクトに新しい責任や動作を追加したりすることはできません)

以上がJavaScriptデコレータパターンとプロキシパターンの機能の違いの詳細例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。