ES6 in Aktion: So verwenden Sie Proxys

ES6 Proxies: Metaprogramming -Kraftpaket in JavaScript

Schlüsselkonzepte:

ES6 -Proxies aktivieren die Metaprogrammierung durch Abfangen von Objekteigenschaftszugriff. Ein Proxy fungiert als Vermittler zwischen Ihrem Code und dem Zielobjekt. Dies beinhaltet drei Schlüsselelemente:

• Ziel: Das ursprüngliche Objekt, das das Proxy verwaltet. Dies kann jedes JavaScript -Objekt sein, einschließlich Arrays oder sogar anderen Proxys.
• Handler: Ein Objekt, das das Verhalten des Proxys mit Fallen .
definiert.
• Fallen:
Funktionen innerhalb des Handlers, die steuern, wie der Proxy auf bestimmte Vorgänge reagiert (z. B. Erhalten, Einstellen, Löschen von Eigenschaften).

Illustratives Beispiel:

Erstellen wir einen Proxy, der den Zugriff auf den Eigenschaft abfängt:

const target = { a: 1, b: 2, c: 3 };

const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42), // Default to 42 if property doesn't exist
};

const proxy = new Proxy(target, handler);

console.log(proxy.a); // 1
console.log(proxy.b); // 2
console.log(proxy.d); // 42

Dieser Proxy gibt den ursprünglichen Wert zurück, wenn die Eigenschaft besteht. Andernfalls gibt es 42.

zurück Erweitertes Beispiel: Controled Eigenschaftseinstellung

Wir können den Proxy verbessern, um Eigenschaftenzuweisungen einzuschränken:

const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42),
  set: (target, prop, value) => {
    if (prop.length === 1 && prop >= 'a' && prop <= 'z') {
      target[prop] = value;
      return true;
    } else {
      throw new Error(`Invalid property: ${prop}`);
    }
  },
};

const proxy = new Proxy({}, handler); // Start with an empty object

proxy.a = 10; // Allowed
proxy.b = 20; // Allowed
try {
  proxy.AB = 30; // Throws an error
} catch (e) {
  console.error(e);
}

Dieses Beispiel ermöglicht nur Einzelcharakter-Eigenschaften (A-Z) eingestellt.

Verfügbare Proxy -Fallen:

get jenseits set und

bieten zahlreiche Fallen eine feinkörnige Kontrolle:

• construct new: Abschnitt
Bediener Anrufe.
• apply
: Abschnitt Funktionsaufrufe.
• deleteProperty
: Abschnitt Eigenschaft Deletion.
• has in: Abschnitt
Bedienerprüfungen.
• ownKeys
: Intercepts Eigenschaft Aufzählung.
und mehr ... (siehe MDN -Dokumentation für eine vollständige Liste)

Praktische Anwendungen:

• Profilerstellung:
Frequenz der Eigenschaft zugänglich.
• Datenbindung:
Synchronisieren Sie Objektänderungen mit UI -Updates.
• Validierung:
Datentypen oder Einschränkungen durchsetzen.
• Negative Array -Indizes:
Zugriffsarray -Elemente am Ende.

Browserkompatibilität und Einschränkungen:

In modernen Browsern und Node.js, die weit verbreitet sind, fehlen ES6-Proxies eine vollständige Cross-Browser-Kompatibilität (insbesondere ältere Browser). Entscheidend ist, dass sie aufgrund ihrer grundlegenden Natur nicht polizeis werden können.

häufig gestellte Fragen (FAQs):

Die bereitgestellten FAQs sind bereits umfassend und gut strukturiert. Es sind keine weiteren Ergänzungen erforderlich.

Das obige ist der detaillierte Inhalt vonES6 in Aktion: So verwenden Sie Proxys. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!