Detaillierte Beispiele für den Unterschied zwischen der Funktion des JavaScript-Decorator-Musters und des Proxy-Musters

Das dekorierte Muster kann einem Objekt dynamisch einige zusätzliche Verantwortlichkeiten hinzufügen, ohne andere von dieser Klasse abgeleitete Objekte zu beeinträchtigen.

Das dekorierte Muster bettet ein Objekt in ein anderes Objekt ein, was tatsächlich der Umhüllung dieses Objekts durch ein anderes Objekt entspricht und so eine Verpackungskette bildet.

Fügen Sie der Funktion einige zusätzliche Funktionen hinzu, ohne die ursprüngliche Funktion zu ändern

1. Speichern Sie die Originalreferenz

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

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

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

Probleme:
(1) Zwischenvariablen müssen gepflegt werden
(2) Dies kann gekapert werden
Im Beispiel für window.onload gibt es keine derartigen Probleme, da beim Aufruf der gewöhnlichen Funktion _onload diese ebenfalls auf window verweist, genau wie beim Aufruf von window.onload.

2. Dies wird gekapert:

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

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

Weil _getElementById eine globale Funktion ist, wann Beim Aufruf der globalen Funktion zeigt diese auf das Fenster, und in document.getElementById wird erwartet, dass diese auf das Dokument zeigt.

3. Lösen Sie das Problem der Entführung:

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

Dekorieren Sie die Funktion mit 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);
});

Vermeiden Kontaminationsprototyp

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

Dekorationsmuster und Proxymuster

Gleichheit: Diese beiden Muster beschreiben beide wie man ein gewisses Maß an indirekter Referenz für ein Objekt bereitstellt. Ihre Implementierungsteile behalten alle eine Referenz auf ein anderes Objekt und senden Anforderungen an dieses Objekt.
Unterschiede:
(1) Proxy-Modus: Wenn der direkte lokale Zugriff unpraktisch ist oder den Anforderungen nicht entspricht, stellen Sie einen Ersatz für diese Ontologie bereit. Definieren Sie Schlüsselfunktionen lokal, und der Agent gewährt oder verweigert den Zugriff darauf oder führt einige zusätzliche Dinge aus, bevor er auf die Ontologie zugreift. (Es macht immer noch das Gleiche wie die Ontologie)
(2) Dekorationsmodus: Fügen Sie dem Objekt dynamisch Verhaltensweisen hinzu. (Sie können zu Beginn nicht alle Funktionen des Objekts bestimmen und dem Objekt tatsächlich neue Verantwortlichkeiten und Verhaltensweisen hinzufügen)

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für den Unterschied zwischen der Funktion des JavaScript-Decorator-Musters und des Proxy-Musters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!