So verwenden Sie Proxy-Objekte in JavaScript

Objekte in JavaScript sind nützliche Datentypen, mit denen wir komplexe Daten mit einfachen Schlüssel-Wert-Paaren definieren können, wie etwa ein Wörterbuch. Manchmal möchten Sie möglicherweise die standardmäßige Funktionsweise von JavaScript-Objekten ändern. Hier sind Proxy-Objekte hilfreich. In diesem Artikel besprechen wir, was Proxy-Objekte sind, warum sie nützlich sind und wie man sie verwendet.

Was ist ein Proxy-Objekt?

Bevor wir verstehen, was ein Proxy-Objekt ist, werfen wir einen Blick auf das Wort Proxy. Ein Proxy bedeutet etwas, das sich wie das Original verhält, aber nicht das Original ist. Ebenso ist ein Proxy-Objekt ein Objekt, das unter Verwendung des Originalobjekts erstellt wurde und die Funktionsweise des Originalobjekts abfangen und ändern kann.

Der Proxy-Konstruktor benötigt zwei Parameter

• Ziel: das Objekt, für das Sie einen Proxy erstellen möchten

• Handler: ein Objekt mit Operationen, die Sie ändern oder neu definieren möchten
  

const proxyObject = new Proxy(target, handler)

Wie funktioniert ein Proxy-Objekt?

Wenn wir Proxy-Objekte mit einem Handler erstellen, der Vorgänge hat, die Sie ändern möchten, fängt er diese Vorgänge ab, fängt den Aufruf des Zielobjekts ab und führt die benutzerdefinierte Logik aus, die Sie für diese Vorgänge definiert haben.

Die Operationen werden Traps genannt und sind im Grunde die internen Methoden eines Objekts. Einige davon sind:

• bekommen

• eingestellt

• deleteProperty

Hier habe ich eine einfache Visualisierung erstellt, die zeigt, wie ein Proxy-Objekt funktioniert. Wenn wir versuchen, auf einen Wert zuzugreifen oder ihn festzulegen, fängt er die im Handler definierten Operationen (Traps) ab und führt sie aus.

Okay, ich hoffe, das Was und Wie von Proxy-Objekten ist klar. Als Nächstes besprechen wir einige Anwendungsfälle, um zu zeigen, warum Proxy-Objekte nützlich sind.

Anwendungsfälle von Proxy-Objekten

Protokollierung

Angenommen, Sie möchten ein System erstellen, in dem jedes Mal, wenn vom Objekt aus auf eine Eigenschaft zugegriffen wird, die Informationen protokolliert werden.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

Dies ist ein sehr einfacher Anwendungsfall, aber er ist nützlich, wenn eine Protokollierung erforderlich ist, und Sie können ihn erweitern, um fortgeschrittenere Aufgaben auszuführen.

Wir können Benutzern auch den Zugriff auf Eigenschaften ermöglichen, die nicht direkt verfügbar sind. Im obigen Fall möchten wir beispielsweise möglicherweise die vollständige URL der Plattform mit dem Benutzer-Handle.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

Validierung

Ein weiterer Anwendungsfall ist die Überprüfung des Werts vor dem Hinzufügen. Nehmen wir zum Beispiel an, wir möchten den Wert des Handles überprüfen, bevor wir ihn festlegen. Wir werden zwei Grundbedingungen validieren:

• Es sollte in Kleinbuchstaben geschrieben sein

• Es kann alphanumerisch sein
  

const proxyObject = new Proxy(target, handler)

Sie fragen sich vielleicht, was Reflect.set(target, key, value) ist. Es handelt sich um ein Namespace-Objekt mit statischen Methoden zum Aufrufen der internen Methoden des JavaScript-Objekts, die abgefangen werden können. Wenn Sie keine Validierung für alle Eigenschaften wünschen, können Sie das Reflect-Objekt verwenden, um das Standardverhalten beizubehalten.

Wir haben über zwei Anwendungsfälle der Protokollierung und Validierung gesprochen, aber Sie können je nach Bedarf auch andere interne Methoden abfangen.

Abschluss

Wir haben darüber gesprochen, was ein Proxy-Objekt ist, wie es funktioniert und welche Verwendung es hat. Ein Proxy-Objekt ist hilfreich, aber wir sollten uns seiner Nachteile bewusst sein. Wir sollten es nur bei Bedarf verwenden, um zu vermeiden, dass versehentlich Komplexität oder Fehler entstehen.

Das ist alles für dieses Thema. Vielen Dank fürs Lesen! Wenn Sie diesen Artikel hilfreich fanden, denken Sie bitte darüber nach, ihn zu liken, zu kommentieren und mit anderen zu teilen.

Weiterführende Literatur

• MDN-Proxy-Dokument

• MDN Reflect Doc

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Proxy-Objekte in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!