JavaScript Academy · Les

get- en set-traps

Pas het lezen en schrijven van eigenschappen aan.

Les 2 van 413 stappen

get- en set-traps is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

De get- en set-traps

De get- en set-traps zijn de meest gebruikte proxy-koppelingen. Ze onderscheppen het lezen en schrijven van eigenschappen, zodat je waarden kunt omvormen, invoer kunt valideren of toegang kunt registreren.

Signatuur van de get-trap

get(target, property, receiver) wordt bij elke leesbewerking uitgevoerd. Geef terug wat je wilt dat de aanroeper ziet.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Standaardwaarden via get

Een get-trap kan een terugvalwaarde leveren voor ontbrekende eigenschappen in plaats van undefined terug te geven.

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

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

Leeswaarden omvormen

De get-trap kan waarden tijdens het uitlezen aanpassen, bijvoorbeeld door tekenreeksen naar hoofdletters om te zetten.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Signatuur van de set-trap

set(target, property, value, receiver) wordt bij elke schrijfbewerking uitgevoerd. De trap moet bij succes true teruggeven, anders gooit de strikte modus een fout.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Validatie in set

Een klassiek gebruik van een set-trap is validatie: ongeldige waarden worden geweigerd voordat ze de target bereiken.

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); }

Waarden omzetten in set

Een set-trap kan niet alleen waarden weigeren, maar ook invoer normaliseren, bijvoorbeeld door tekenreeksen bij te snijden voordat ze worden opgeslagen.

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 bewerkingen registreren

Combineer get en set om elke toegang te traceren. Dat is van onschatbare waarde bij het opsporen van fouten in het gebruik van een object.

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);

Alleen-lezen afdwingen

Een set-trap die schrijfbewerkingen altijd weigert, maakt van een proxy een alleen-lezenweergave van de target.

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);

Symbol-sleutels en interne werking

Traps worden ook voor symbol-sleutels uitgevoerd. Let op: het registreren van elke eigenschap, inclusief interne symbolen, kan veel ruis veroorzaken. Filter daarom wanneer dat nodig is.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Waarom get en set belangrijk zijn

Samen maken deze traps validatie, berekende eigenschappen, standaardwaarden, registratie en reactiviteit mogelijk, zonder de target te wijzigen. Maar handmatig target[prop] = value schrijven binnen traps heeft randgevallen. De Reflect-API, die hierna aan bod komt, handelt deze correct af.

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);

Korte controle

Wat moet een set-trap teruggeven om een geslaagde toewijzing aan te geven?

Beantwoord dit in de interactieve les

Samenvatting: get- en set-traps

Je hebt de belangrijkste proxy-traps geleerd:

get(target, prop, receiver) onderschept leesbewerkingen; geef een willekeurige waarde terug.
set(target, prop, value, receiver) onderschept schrijfbewerkingen; geef bij succes true terug.
Gebruik ze voor standaardwaarden, transformaties, validatie en registratie.
Gebruik voor een correcte interne afhandeling binnen traps Reflect, dat hierna aan bod komt.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “get- en set-traps” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “get- en set-traps”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “get- en set-traps”?

Pas het lezen en schrijven van eigenschappen aan. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “get- en set-traps”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy