Detaillierte Erklärung des Prinzips des js-Proxys

Detaillierte Erklärung des Prinzips des js-Proxys

Was ist der Proxy-Modus?

Einführung eines Beispiels aus der Praxis

Müssen wir als Nutzer eine Reihe langwieriger Dinge herausfinden, beispielsweise wie man die Qualität eines Hauses bewertet, wie man die Verfahren zur Wohnungssuche durchführt usw.? Natürlich möchten Benutzer dies nicht tun. Was den Nutzern am wichtigsten ist, ist das Ergebnis. Nutzer können ein zufriedenstellendes Haus erhalten, indem sie Ansprüche an das Haus stellen und Geld in gleichem Wert bereitstellen. Dies ist das Ergebnis.

Wer also löst den langwierigen Hauskaufprozess für die Nutzer? Natürlich ist es der „Immobilienmakler“! Die Rolle eines Immobilienmaklers besteht in der Erbringung von Bewertungs-, Transaktions-, Vermittlungs-, Beratungs- und sonstigen Dienstleistungen sowie After-Sales-Services für die Transaktionsobjekte auf dem Angebots- und Nachfragemarkt für die Entwicklung, den Betrieb und den Verbrauch von Immobilien.

Verstehen Sie die Definition des Proxy-Modells anhand von Beispielen

In manchen Fällen ist es nicht sinnvoll oder möglich, dass ein Objekt direkt auf ein anderes Objekt verweist, und ein Proxy-Objekt kann als Vermittler zwischen dem Client und dem Zielobjekt fungieren.

Das Agenturmodell dient dazu, eine Art Agent für andere Benutzer bereitzustellen. Benutzer müssen den spezifischen Prozess des Hauskaufs nicht kennen. Was die Benutzer interessieren sollte, ist, wie sie zufriedenstellende Ergebnisse erzielen. Was der Agent tun muss, ist, den Prozess des Hauskaufs abzuschließen.

Was ist ein Proxy

Proxy unterstützt viele Abfangoperationen, derzeit werden nur get(target, propKey, receiver) und set(target, propKey, value, receiver) erwähnt.

  • Get-Methode: fängt das Lesen von Objektattributen ab;
  • Set-Methode: Abfangen der Einstellung von Objekteigenschaften.

get(Ziel, Eigenschaftenschlüssel, Empfänger)

Definieren Sie ein Personenobjekt, das von Proxy weitergeleitet wird. Die Außenwelt greift über das Proxy-Instanzobjekt auf das Personenobjekt zu.

var Person = {
    Name: "kongsam",
    Alter: 21,
    Hobbys:
        "Anime schauen",
        "Radfahren",
        "Spiele spielen"
    ]
}

Instanziieren Sie ein Proxy-Objekt, um externe Vorgänge am Personenobjekt abzufangen.

var Proxy = neuer Proxy (Person, {
    get: Funktion (Ziel, Eigenschaft) {
          // Ziel und Eigenschaft drucken, um zu sehen, was sich darin befindet.
          konsole.log("ziel = ", ziel);
          console.log("Eigenschaft = ", Eigenschaft);
          // Bestimmen Sie, ob das von der Außenwelt aufgerufene Objektattribut im Zielobjekt vorhanden ist.
          if (Eigenschaft im Ziel) {
                Ziel [Eigenschaft] zurückgeben;
          } anders {
                // Wenn die von der Außenwelt aufgerufene Objekteigenschaft im Zielobjekt nicht vorhanden ist, wird eine Ausnahme ausgelöst.
                throw new ReferenceError('Eigenschaft "' + Eigenschaft + '" existiert nicht.');
          }
    },
});

Da beim Ausführen der Operation „proxy.name“ das Person-Objekt durch Proxy weitergeleitet wurde, wird immer, wenn ich über das Proxy-Instanzobjekt auf die in Person vorhandenen Attribute zugreife, die Methode „get“ aufgerufen, und die Methode „get“ fängt das Lesen der Objektattribute ab.

Die von den beiden Parametern Ziel und Eigenschaft in get: Funktion (Ziel, Eigenschaft) empfangenen Informationen sind in der Abbildung dargestellt

Beim Zugriff auf die Eigenschaften, die im Personenobjekt vorhanden sind, über das Proxy-Objekt tritt keine Ausnahme auf. Was passiert, wenn Sie auf die nicht vorhandenen Eigenschaften zugreifen?

Warum wird beim Zugriff auf eine nicht vorhandene Eigenschaft eine Ausnahme ausgelöst?

Dies liegt daran, dass jeder Zugriff auf das Personenobjekt von der Außenwelt zuerst die vom Proxy festgelegte Abfangschicht durchlaufen muss und die Abfangschicht einen Mechanismus zum Filtern und Umschreiben des Zugriffs von der Außenwelt bereitstellt.

// Bestimmen Sie, ob das von der Außenwelt aufgerufene Objektattribut im Zielobjekt vorhanden ist.
if (Eigenschaft im Ziel) {
    Ziel [Eigenschaft] zurückgeben;
} anders {
    // Wenn die von der Außenwelt aufgerufene Objekteigenschaft im Zielobjekt nicht vorhanden ist, wird eine Ausnahme ausgelöst.
    throw new ReferenceError('Eigenschaft "' + Eigenschaft + '" existiert nicht.');
}

Die if-Anweisung ist die spezifische Operation der Abfangschicht, die darin besteht, externe Zugriffe zu filtern und neu zu schreiben. Wenn nicht, wird beim Zugriff auf eine nicht vorhandene Eigenschaft „undefined“ zurückgegeben.

setze(Ziel, Eigenschaftenschlüssel, Wert, Empfänger)

Es ist immer noch ein Personenobjekt. Jetzt habe ich eine neue Anforderung. Beim Ändern des Altersattributs darf der Wert 150 nicht überschreiten und muss eine Ganzzahl sein.

Set-Methode im Proxy-Objekt hinzugefügt.

var Proxy = neuer Proxy (Person, {
    set: Funktion (Ziel, Eigenschaft, Wert) {
          // Ziel, Eigenschaft und Wert drucken, um den Inhalt zu sehen.
          konsole.log("ziel = ", ziel);
          console.log("Eigenschaft = ", Eigenschaft);
          console.log("Wert = ", Wert);
          if (Eigenschaft === "Alter") {
                wenn (!Number.isInteger(value)) {
                  throw new TypeError("Der Wert von age ist keine Ganzzahl!");
                }
                wenn (Wert > 150) {
                  throw new RangeError("Alter kann nicht größer als 150 sein!");
                }
          }
    },
});

Wenn ich proxy.age = 100 ausführe, werden die von den drei Parametern des Sets empfangenen Informationen in der folgenden Abbildung angezeigt.

Die Set-Methode wird verwendet, um die Zuweisungsoperation eines bestimmten Attributs abzufangen. Was passiert, wenn die Zuweisungsoperation des Alters die Bedingungen nicht erfüllt?

Offensichtlich wird eine Ausnahme ausgelöst.

Zusammenfassen

Proxy ist eine Abfangschicht. Sie geben das abgefangene Objekt an, und die Außenwelt muss zuerst die Abfangschicht passieren, um auf dieses Objekt zuzugreifen, d. h. auf das Instanzobjekt von Proxy zugreifen. Proxys dienen zum Filtern und Umschreiben von externen Zugriffen, beispielsweise müssen bei der Wertevergabe gewisse Voraussetzungen erfüllt sein.

Es gibt viele andere Methoden im Proxy-Objekt, wie z. B. has, deleteProperty, ownKeys, getOwnPropertyDescriptor usw., die zum Abfangen verschiedener Situationen verwendet werden.

Oben finden Sie eine ausführliche Erklärung des Prinzips von js Proxy. Weitere Informationen zu js Proxy finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Proxy-Objekt in JavaScript
  • JS führt Sie tief in die Welt von Proxy
  • Spezifische Verwendung von ES6-Proxy in JavaScript
  • Welche interessanten Dinge kann JavaScript Proxy tun?
  • Detaillierte Erklärung des JavaScript-Proxy-Objekts

<<:  So installieren Sie Graphviz und beginnen mit dem Tutorial unter Windows

>>:  Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS 7.4 64-Bit

Artikel empfehlen

MySQL Multi-Instance-Bereitstellungs- und Installationshandbuch unter Linux

Was ist MySQL Multi-Instance Einfach ausgedrückt ...

Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung

Inhaltsverzeichnis Verfahren Demo Mini-Programm B...

Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats

1. Einleitung Wenn ein Webprojekt auf unserem Lin...

Schritte zur Erstellung einer React Fiber-Struktur

Inhaltsverzeichnis React-Fasererstellung 1. Bevor...

Beispiel für die Verwendung von Docker zum Erstellen eines ELK-Protokollsystems

Die folgenden Installationen verwenden alle das V...

Spezifische Schritte für den Vue-Browser zur Rückgabe der Überwachung

Vorwort Beim Teilen einer Seite hoffen Sie, durch...

Beispiele für minimalistisches Website-Design

Webanwendungsklasse 1. DownFürAlleOderNurIch Mith...

Verwendung des Linux-Datumsbefehls

1. Befehlseinführung Mit dem Datumsbefehl wird di...

Detaillierte Erklärung des Ref-Attributs von Vue

Zusammenfassen Dieser Artikel endet hier. Ich hof...

HeidiSQL-Tool zum Exportieren und Importieren von MySQL-Daten

Um den Export und Import von Daten in SQL zu erle...

Implementierungsbeispiel für das Zurücksetzen des CSS-Reset-Stils

Einführung: Alle Browser verfügen über Standardst...

Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen

Wie können Sie die Leistung einer Webseite verbes...

Wie implementiert die MySQL-Datenbank die XA-Spezifikation?

MySQL-Konsistenzprotokoll Was passiert mit nicht ...