Wie funktionieren Proxy-Objekte in JavaScript?

Mit einem JavaScript-Proxy-Objekt können Sie das Verhalten eines anderen Objekts abfangen und anpassen, ohne das Original zu ändern.

Mithilfe von Proxy-Objekten können Sie Daten validieren, zusätzliche Funktionen bereitstellen und den Zugriff auf Eigenschaften und Funktionen steuern.

Erfahren Sie alles über die Verwendung von Proxy-Objekten und wie Sie sie in JavaScript erstellen können.

Erstellen eines Proxy-Objekts

In JavaScript können Sie Proxy-Objekte mit dem Proxy -Konstruktor erstellen. Dieser Konstruktor benötigt zwei Argumente: ein Zielobjekt , um das der Proxy gewickelt wird, und ein Handler -Objekt, dessen Eigenschaften das Verhalten des Proxys definieren, wenn Sie Operationen ausführen.

Es verwendet diese Argumente und erstellt ein Objekt, das Sie anstelle des Zielobjekts verwenden können. Dieses erstellte Objekt kann Kernoperationen wie das Abrufen, Festlegen und Definieren von Eigenschaften neu definieren. Sie können diese Proxy-Objekte auch verwenden, um Eigenschaftszugriffe zu protokollieren und Eingaben zu validieren, zu formatieren oder zu bereinigen.

Zum Beispiel:

const originalObject = {
  foo: "bar"
}


const handler = {
  get: function(target, property) {
    return target[property];
  },
  set: function(target, property, value) {
    target[property] = value;
  }
};

const proxy = new Proxy(originalObject, handler)


Dieser Code erstellt ein Zielobjekt, originalObject , mit einer einzigen Eigenschaft, foo , und einem Handler-Objekt, handler . Das Handler-Objekt enthält zwei Eigenschaften, get und set . Diese Eigenschaften werden als Fallen bezeichnet.

Ein Proxy-Objekt-Trap ist eine Funktion, die immer dann aufgerufen wird, wenn Sie eine bestimmte Aktion an einem Proxy-Objekt ausführen. Mit Traps können Sie das Verhalten des Proxy-Objekts abfangen und anpassen. Der Zugriff auf eine Eigenschaft aus dem Proxy-Objekt ruft die Get -Trap auf, und das Modifizieren oder Manipulieren einer Eigenschaft aus dem Proxy-Objekt ruft die Set -Trap auf.

Schließlich erstellt der Code mit dem Proxy -Konstruktor ein Proxy-Objekt. Es übergibt originalObject und Handler als Zielobjekt bzw. Handler.

Verwendung von Proxy-Objekten

Proxy-Objekte haben mehrere Verwendungen in JavaScript, von denen einige wie folgt sind.

Hinzufügen von Funktionalität zu einem Objekt

Sie können ein Proxy-Objekt verwenden, um ein vorhandenes Objekt zu umschließen und neue Funktionen wie Protokollierung oder Fehlerbehandlung hinzuzufügen, ohne das ursprüngliche Objekt zu ändern.

Um neue Funktionalität hinzuzufügen, müssen Sie den Proxy -Konstruktor verwenden und eine oder mehrere Traps für die Aktionen definieren, die Sie abfangen möchten.

Zum Beispiel:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};


const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}"to value "${value}"`);
    target[property] = value;
  },
};

console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.lastName); // Getting property "lastName"Martins
proxy.age = 23; // Setting property "age" to value "23"


Dieser Codeblock fügt Funktionalität über die Proxy-Traps get und set hinzu . Wenn Sie nun versuchen, auf eine Eigenschaft des userObject zuzugreifen oder diese zu ändern , protokolliert das Proxy-Objekt zuerst Ihren Vorgang in der Konsole, bevor es auf die Eigenschaft zugreift oder diese ändert.

Validieren von Daten, bevor sie für ein Objekt festgelegt werden

Sie können Proxy-Objekte verwenden, um Daten zu validieren und sicherzustellen, dass sie bestimmte Kriterien erfüllen, bevor Sie sie für ein Objekt festlegen. Sie können dies tun, indem Sie die Validierungslogik in einem Set -Trap im Handler – Objekt definieren.

Zum Beispiel:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};


const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    if (
      property === "age" &&
      typeof value == "number" &&
      value > 0 &&
      value < 120
    ) {
      console.log(`Setting property "${property}"to value "${value}"`);
      target[property] = value;
    } else {
      throw new Error("Invalid parameter. Please review and correct.");
    }
  },
};

const proxy = new Proxy(userObject, handler);
proxy.age = 21;


Dieser Codeblock fügt dem Set -Trap Validierungsregeln hinzu. Sie können der age- Eigenschaft einer userObject- Instanz einen beliebigen Wert zuweisen . Aber mit den hinzugefügten Validierungsregeln können Sie der Alterseigenschaft nur dann einen neuen Wert zuweisen, wenn es sich um eine Zahl handelt, die größer als 0 und kleiner als 120 ist. Jeder Wert, den Sie für die Alterseigenschaft festzulegen versuchen, der die erforderlichen Kriterien nicht erfüllt löst einen Fehler aus und gibt eine Fehlermeldung aus.

Steuern des Zugriffs auf Objekteigenschaften

Sie können Proxy-Objekte verwenden, um bestimmte Eigenschaften eines Objekts auszublenden. Definieren Sie dazu Einschränkungslogik in get traps für die Eigenschaften, auf die Sie den Zugriff steuern möchten.

Zum Beispiel:

const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
  phone: 1234567890,
  email: "foo@bar.com",
};


const handler = {
  get: function (target, property) {
    if (property === "phone" || property === "email") {
      throw new Error("Access to info denied");
    } else {
      console.log(`Getting property "${property}"`);
      return target[property];
    }
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}"to value "${value}"`);
    target[property] = value;
  },
};

console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error


Der obige Codeblock fügt der Get -Trap bestimmte Einschränkungen hinzu. Anfänglich können Sie auf alle verfügbaren Eigenschaften von userObject zugreifen . Die hinzugefügten Regeln verhindern den Zugriff auf vertrauliche Informationen wie E-Mail oder Telefon des Benutzers. Der Versuch, auf eine dieser Eigenschaften zuzugreifen, löst einen Fehler aus.

Andere Proxy-Traps

Die Get- und Set- Traps sind die gebräuchlichsten und nützlichsten, aber es gibt noch 11 weitere JavaScript-Proxy-Traps. Sie sind:

• apply : Die apply -Trap wird ausgeführt, wenn Sie eine Funktion für das Proxy-Objekt aufrufen.
• construct : Die Konstrukt -Trap wird ausgeführt, wenn Sie den new-Operator verwenden, um ein Objekt aus dem Proxy-Objekt zu erstellen.
• deleteProperty : Die deleteProperty -Trap wird ausgeführt, wenn Sie den delete – Operator verwenden, um eine Eigenschaft aus dem Proxy-Objekt zu entfernen.
• has – Die has -Trap wird ausgeführt, wenn Sie den in – Operator verwenden, um zu prüfen, ob eine Eigenschaft für das Proxy-Objekt vorhanden ist.
• ownKeys – Die Trap „ ownKeys“ wird ausgeführt , wenn Sie entweder die Funktion „ Object.getOwnPropertyNames“ oder „Object.getOwnPropertySymbols“ für das Proxy-Objekt aufrufen.
• getOwnPropertyDescriptor – Die Trap „ getOwnPropertyDescriptor“ wird ausgeführt , wenn Sie die Funktion „Object.getOwnPropertyDescriptor“ für das Proxy-Objekt aufrufen.
• defineProperty – Der defineProperty -Trap wird ausgeführt, wenn Sie die Object.defineProperty- Funktion für das Proxy-Objekt aufrufen.
• PreventExtensions – Die Trap PreventExtensions wird ausgeführt , wenn Sie die Funktion Object.preventExtensions für das Proxy-Objekt aufrufen.
• isExtensible – Der isExtensible -Trap wird ausgeführt, wenn Sie die Object.isExtensible- Funktion für das Proxy-Objekt aufrufen.
• getPrototypeOf – Die getPrototypeOf -Trap wird ausgeführt, wenn Sie die Object.getPrototypeOf- Funktion für das Proxy-Objekt aufrufen.
• setPrototypeOf – Die setPrototypeOf -Trap wird ausgeführt, wenn Sie die Object.setPrototypeOf- Funktion für das Proxy-Objekt aufrufen.

Wie die Set- and – Get – Traps können Sie diese Traps verwenden, um Ihrem Objekt neue Funktionalitäts-, Validierungs- und Steuerungsebenen hinzuzufügen, ohne das Original zu ändern.

Die Nachteile von Proxy-Objekten

Proxy-Objekte können ein leistungsstarkes Werkzeug sein, um einem Objekt benutzerdefinierte Funktionen oder Validierungen hinzuzufügen. Aber sie haben auch einige potenzielle Nachteile. Ein solcher Nachteil ist die Schwierigkeit beim Debuggen, da es schwierig sein kann, zu sehen, was hinter den Kulissen passiert.

Proxy-Objekte können auch schwierig zu verwenden sein, insbesondere wenn Sie mit ihnen nicht vertraut sind. Sie sollten diese Nachteile sorgfältig berücksichtigen, bevor Sie Proxy-Objekte in Ihrem Code verwenden.