get- und set-Traps
Passen Sie das Lesen und Schreiben von Eigenschaften an.
get- und set-Traps ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Die get- und set-Traps
Die get- und set-Traps sind die am häufigsten verwendeten Proxy-Hooks. Sie fangen das Lesen und Schreiben von Eigenschaften ab und ermöglichen es Ihnen, Werte umzuwandeln, Eingaben zu validieren oder Zugriffe zu protokollieren.
Signatur des get-Traps
get(target, property, receiver) wird bei jedem Lesen einer Eigenschaft ausgeführt. Geben Sie zurück, was der aufrufende Code sehen soll.
const proxy = new Proxy({ price: 10 }, {
get(target, prop) {
return target[prop];
}
});
console.log(proxy.price);Standardwerte über get
Ein get-Trap kann für fehlende Eigenschaften einen Ersatzwert liefern, statt undefined zurückzugeben.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 0;
}
});
console.log(proxy.a);
console.log(proxy.missing);Gelesene Werte umwandeln
Der get-Trap kann Werte beim Auslesen umformen, beispielsweise Zeichenfolgen in Großbuchstaben umwandeln.
const proxy = new Proxy({ name: 'ada' }, {
get(target, prop) {
const value = target[prop];
return typeof value === 'string' ? value.toUpperCase() : value;
}
});
console.log(proxy.name);Signatur des set-Traps
set(target, property, value, receiver) wird bei jedem Schreibzugriff ausgeführt. Bei Erfolg muss der Trap true zurückgeben, andernfalls wird im Strict Mode ein Fehler ausgelöst.
const proxy = new Proxy({}, {
set(target, prop, value) {
target[prop] = value;
return true;
}
});
proxy.x = 5;
console.log(proxy.x);Validierung in set
Der klassische Einsatz eines set-Traps ist die Validierung: Ungültige Werte werden abgelehnt, bevor sie das Zielobjekt erreichen.
const person = new Proxy({}, {
set(target, prop, value) {
if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
throw new TypeError('age must be a non-negative number');
}
target[prop] = value;
return true;
}
});
person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }Werte in set umwandeln
Ein set-Trap kann Eingaben nicht nur ablehnen, sondern auch normalisieren, beispielsweise Zeichenfolgen vor dem Speichern von Leerzeichen am Anfang und Ende befreien.
const proxy = new Proxy({}, {
set(target, prop, value) {
target[prop] = typeof value === 'string' ? value.trim() : value;
return true;
}
});
proxy.name = ' Ada ';
console.log('[' + proxy.name + ']');Beide Operationen protokollieren
Kombinieren Sie get und set, um jeden Zugriff nachzuverfolgen. Das ist beim Debuggen der Verwendung eines Objekts äußerst hilfreich.
const proxy = new Proxy({ v: 1 }, {
get(target, prop) {
console.log('GET ' + prop);
return target[prop];
},
set(target, prop, value) {
console.log('SET ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.v = 42;
console.log(proxy.v);Schreibzugriffe verhindern
Ein set-Trap, der Schreibzugriffe immer ablehnt, macht aus einem Proxy eine schreibgeschützte Ansicht seines Zielobjekts.
const readonly = new Proxy({ pi: 3.14 }, {
set() {
console.log('writes are blocked');
return false;
}
});
try {
'use strict';
readonly.pi = 0;
} catch (e) {
console.log(e.name);
}
console.log(readonly.pi);Symbolschlüssel und interne Zugriffe
Traps werden auch bei Symbolschlüsseln ausgelöst. Seien Sie vorsichtig: Wenn Sie jede Eigenschaft einschließlich interner Symbole protokollieren, kann die Ausgabe sehr umfangreich werden. Filtern Sie sie bei Bedarf.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
if (typeof prop === 'string') console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.a);Warum get und set wichtig sind
Zusammen ermöglichen diese Traps Validierung, berechnete Eigenschaften, Standardwerte, Protokollierung und Reaktivität, ohne das Zielobjekt zu verändern. Das manuelle Schreiben von target[prop] = value innerhalb von Traps hat jedoch einige Sonderfälle. Die als Nächstes behandelte Reflect-API kümmert sich korrekt darum.
const tracked = new Proxy({ total: 0 }, {
set(target, prop, value) {
console.log(prop + ' changed to ' + value);
target[prop] = value;
return true;
}
});
tracked.total = 100;
console.log(tracked.total);Kurzer Test
Was muss ein set-Trap zurückgeben, um eine erfolgreiche Zuweisung zu signalisieren?
Zusammenfassung: get- und set-Traps
Sie haben die wichtigsten Proxy-Traps kennengelernt:
get(target, prop, receiver)fängt Lesezugriffe ab; Sie können einen beliebigen Wert zurückgeben.set(target, prop, value, receiver)fängt Schreibzugriffe ab; geben Sie bei Erfolgtruezurück.- Verwenden Sie sie für Standardwerte, Umwandlungen, Validierung und Protokollierung.
- Für die korrekte interne Verarbeitung innerhalb von Traps verwenden Sie
Reflect, das als Nächstes behandelt wird.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 59
- Lektionen
- 200
Häufig gestellte Fragen
Ist die Lektion „get- und set-Traps“ kostenlos?
Ja — der vollständige Text von „get- und set-Traps“ 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 „get- und set-Traps“?
Passen Sie das Lesen und Schreiben von Eigenschaften an. 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 2 von 4.
Wie lange dauert die Lektion „get- und set-Traps“?
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
- Einen Proxy erstellen
- get- und set-Traps
- Die Reflect-API
- Praktische Proxy-Anwendungsfälle