JavaScript Academy · Lektion

Reflect-API'en

Videresend operationer med Reflect-metoder.

Lektion 3 af 413 trin

Reflect-API'en er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er Reflect?

Reflect er et indbygget objekt med metoder, der udfører standardhandlinger på lavt niveau for objekter: læsning, skrivning, sletning og mere.

Dets metoder afspejler proxy-traps én til én, hvilket gør det til den ideelle makker, når du skal skrive korrekte proxyer.

Reflect.get

Reflect.get(target, prop) læser en egenskab, ligesom target[prop], men som et rent funktionskald.

const obj = { name: 'Ada', age: 36 };

console.log(Reflect.get(obj, 'name'));
console.log(Reflect.get(obj, 'age'));

Reflect.set

Reflect.set(target, prop, value) skriver en egenskab og returnerer true eller false for at angive, om det lykkedes, præcis som en set-trap forventer.

const obj = {};
const ok = Reflect.set(obj, 'score', 42);

console.log(ok);
console.log(obj.score);

Reflect.has og deleteProperty

Reflect.has svarer til in-operatoren, og Reflect.deleteProperty svarer til delete; begge fungerer som metoder, der returnerer booleske værdier.

const obj = { a: 1, b: 2 };

console.log(Reflect.has(obj, 'a'));
console.log(Reflect.deleteProperty(obj, 'b'));
console.log(Reflect.has(obj, 'b'));

Reflect.ownKeys

Reflect.ownKeys returnerer alle egne egenskabsnøgler, herunder symboler og ikke-opregnelige nøgler, og er mere komplet end Object.keys.

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'hidden', { value: 3, enumerable: false });

console.log(Object.keys(obj));
console.log(Reflect.ownKeys(obj));

Videresendelse i en Proxy

Den egentlige styrke er, at du i en trap kalder den tilsvarende Reflect-metode for at udføre standardadfærden og derefter tilføjer din egen logik omkring den.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop, receiver) {
    console.log('reading ' + prop);
    return Reflect.get(target, prop, receiver);
  }
});

console.log(proxy.v);

Korrekt videresendelse af set

Når du bruger Reflect.set i en set-trap, returneres den korrekte booleske værdi automatisk, så du ikke selv skal huske at returnere true.

const proxy = new Proxy({}, {
  set(target, prop, value, receiver) {
    console.log('writing ' + prop);
    return Reflect.set(target, prop, value, receiver);
  }
});

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

Hvorfor receiver er vigtig

Ved at sende receiver til Reflect.get og Reflect.set sikrer du, at getters og setters køres med den korrekte this-værdi. Det er vigtigt, når objekter nedarver fra hinanden.

const base = { get label() { return 'id-' + this.id; } };
const proxy = new Proxy(base, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  }
});
const child = Object.create(proxy);
child.id = 7;
console.log(child.label);

Reflect.apply

Reflect.apply(fn, thisArg, argsArray) kalder en funktion med en bestemt this-værdi og et array af argumenter. Det er et renere alternativ til fn.apply.

function greet(greeting, name) {
  return greeting + ', ' + name;
}

console.log(Reflect.apply(greet, null, ['Hello', 'Ada']));

Reflect.construct

Reflect.construct(Cls, argsArray) opretter en instans. Det svarer til new Cls(...args), men med et array af argumenter.

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
}

const p = Reflect.construct(Point, [3, 4]);
console.log(p.x, p.y);

Hvorfor Reflect er vigtig

Reflect giver funktionsbaserede og forudsigelige versioner af objektets interne handlinger og passer perfekt sammen med proxyer: hver trap videresender til den tilsvarende Reflect-metode. Resultatet er korrekt og minimal proxy-kode. I næste afsnit anvender du alt dette på praktiske anvendelser.

const audited = new Proxy({ balance: 100 }, {
  set(t, p, v, r) {
    console.log(p + ': ' + t[p] + ' -> ' + v);
    return Reflect.set(t, p, v, r);
  }
});
audited.balance = 150;
console.log(audited.balance);

Hurtigt tjek

Hvorfor skal du kalde Reflect.get(target, prop, receiver) i en get-trap i stedet for target[prop]?

Besvar den i den interaktive lektion

Opsummering: Reflect-API'et

Du har lært Proxy's makker at kende:

Reflect leverer standardhandlinger i funktionsform: get, set, has, deleteProperty og ownKeys.
Dets metoder afspejler proxy-traps én til én.
Videresendelse gennem Reflect med receiver sikrer korrekt nedarvning.
Reflect.apply kalder funktioner, og Reflect.construct opretter instanser på en enkel måde.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Reflect-API'en” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Reflect-API'en”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Reflect-API'en”?

Videresend operationer med Reflect-metoder. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Reflect-API'en”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy