0Pricing
JavaScript Academy · Lektion

Praktische Proxy-Anwendungsfälle

Erstellen Sie Validierungs-, Logging- und reaktive Objekte.

Praktische Proxy-Anwendungsfälle ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Proxys in der Praxis

Nun kombinieren Sie Proxys und Reflect, um reale Probleme zu lösen: Validierung, Protokollierung, Standardwerte und mehr. Jedes Muster umschließt ein einfaches Objekt, ohne es zu verändern.

Validierungs-Wrapper

Erzwingen Sie ein Schema: Lehnen Sie jede Zuweisung ab, die eine Regel nicht erfüllt. Das Zielobjekt bleibt sauber, weil fehlerhafte Daten gar nicht erst dort gespeichert werden.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

Protokollierungs-Wrapper

Verfolgen Sie jeden Lese- und Schreibzugriff zu Debugging-Zwecken, indem Sie nach der Protokollierung über Reflect weiterleiten.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

Standardwerte

Geben Sie für jede fehlende Eigenschaft einen Ersatzwert zurück, sodass Lesezugriffe niemals undefined liefern.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

Negative Array-Indizes

Ermöglichen Sie Arrays Python-ähnliche negative Indizes, indem Sie sie in einem get-Trap umwandeln.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

Schreibgeschützte Ansicht

Stellen Sie ein Objekt bereit, das gelesen, aber niemals beschrieben werden kann – nützlich zum Schutz gemeinsam genutzter Konfigurationen.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

Zugriffe zählen

Verfolgen Sie, wie oft jede Eigenschaft gelesen wird, indem Sie die Zähler außerhalb des Zielobjekts speichern.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

Berechnete virtuelle Eigenschaften

Stellen Sie abgeleitete Werte bereit, die nicht gespeichert werden, sondern bei jedem Lesezugriff neu berechnet werden.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

Unbekannte Lesezugriffe auslösen

Erkennen Sie Tippfehler frühzeitig, indem Sie einen Fehler auslösen, wenn der Code eine nicht vorhandene Eigenschaft liest.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

Mehrere Aufgaben kombinieren

In der Praxis kombinieren Wrapper häufig Validierung und Protokollierung in einem Handler, wobei jeder Trap über Reflect weiterleitet.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

Warum diese Muster wichtig sind

Proxys fügen Querschnittsverhalten, Validierung, Protokollierung, Standardwerte und Zugriffskontrolle hinzu, ohne das ursprüngliche Objekt oder seinen aufrufenden Code zu überladen. Genau so beobachten reaktive Frameworks Zustandsänderungen. Verwenden Sie Proxys, wenn Sie eine transparente Abfanglogik benötigen.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

Kurzer Test

Welchen Proxy-Trap würden Sie verwenden, um ungültige Werte abzulehnen, bevor sie gespeichert werden?

Zusammenfassung: Praktische Anwendungsfälle für Proxys

Sie haben Proxys auf reale Probleme angewendet:

  • Validierung im set-Trap lehnt fehlerhafte Daten ab.
  • Protokollierung verfolgt Lese- und Schreibzugriffe über Reflect.
  • Standardwerte und virtuelle Eigenschaften werden im get-Trap bereitgestellt.
  • Schreibgeschützte Ansichten, das Zählen von Zugriffen und die strenge Prüfung auf Tippfehler umschließen Objekte ebenfalls transparent.

Häufig gestellte Fragen

Ist die Lektion „Praktische Proxy-Anwendungsfälle“ kostenlos?

Ja — der vollständige Text von „Praktische Proxy-Anwendungsfälle“ 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 „Praktische Proxy-Anwendungsfälle“?

Erstellen Sie Validierungs-, Logging- und reaktive Objekte. 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 4 von 4.

Wie lange dauert die Lektion „Praktische Proxy-Anwendungsfälle“?

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

  1. Einen Proxy erstellen
  2. get- und set-Traps
  3. Die Reflect-API
  4. Praktische Proxy-Anwendungsfälle
← Zurück zu JavaScript Academy