JavaScript Academy · Lektion

Einen Proxy erstellen

Umschließen Sie Objekte, um Operationen abzufangen.

Einen Proxy erstellen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Proxy?

Ein Proxy umschließt ein Objekt und ermöglicht es Ihnen, grundlegende Operationen wie das Lesen, Schreiben und Löschen von Eigenschaften abzufangen.

Sie erstellen einen Proxy mit new Proxy(target, handler). Dabei definiert der Handler sogenannte Traps, die das Verhalten anpassen.

Ein leerer Handler

Bei einem leeren Handler verhält sich der Proxy genau wie das Zielobjekt. Jede Operation wird direkt weitergeleitet.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

Zielobjekt und Proxy teilen sich den Zustand

Der Proxy kopiert das Zielobjekt nicht. Beide verweisen auf dasselbe zugrunde liegende Objekt, sodass eine Änderung über eines von beiden in beiden sichtbar ist.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Einen get-Trap hinzufügen

Der get-Trap fängt das Lesen von Eigenschaften ab. Hier wird jeder Lesezugriff protokolliert, bevor der Wert zurückgegeben wird.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Parameter eines Traps

Der get-Trap erhält das target, den Namen der property und den receiver (den Proxy). Sie entscheiden, was zurückgegeben wird.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Berechnete Eigenschaften beim Lesen

Ein get-Trap kann Werte zurückgeben, die das Zielobjekt tatsächlich nicht speichert, und sie bei Bedarf berechnen.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Einen set-Trap hinzufügen

Der set-Trap fängt Schreibzugriffe ab. Sie müssen true zurückgeben, um Erfolg zu signalisieren. Andernfalls gilt die Zuweisung als fehlgeschlagen.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

Der has-Trap

Der has-Trap fängt den in-Operator ab und ermöglicht es Ihnen, die Prüfung auf Zugehörigkeit anzupassen.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

Der deleteProperty-Trap

Der deleteProperty-Trap fängt delete ab. Geben Sie bei Erfolg true zurück.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Viele Traps verfügbar

Neben get und set unterstützen Proxys Traps für has, deleteProperty, ownKeys, apply (für Funktionen), construct und weitere. Sie implementieren nur die Traps, die Sie benötigen.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Warum Proxys wichtig sind

Mit Proxys können Sie Validierung, Protokollierung, Standardwerte und Reaktivität hinzufügen, ohne das Zielobjekt zu verändern. Sie bilden die Grundlage für Frameworks wie das Reaktivitätssystem von Vue. Als Nächstes sehen Sie sich get- und set-Traps genauer an.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Kurzer Test

Was erstellt new Proxy(target, handler)?

Zusammenfassung: Einen Proxy erstellen

Sie haben gelernt, Objektoperationen abzufangen:

new Proxy(target, handler) umschließt ein Objekt mit Traps.
Ein leerer Handler leitet alles weiter; Proxy und Zielobjekt teilen sich den Zustand.
Häufige Traps sind get, set, has, deleteProperty und ownKeys.
set- und delete-Traps müssen bei Erfolg true zurückgeben.

Häufig gestellte Fragen

Ist die Lektion „Einen Proxy erstellen“ kostenlos?

Ja — der vollständige Text von „Einen Proxy erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Einen Proxy erstellen“?

Umschließen Sie Objekte, um Operationen abzufangen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Einen Proxy erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy