PricingLoginStart free
JavaScript Academy · Lektion

Praktiska användningsområden för Proxy

Bygg validerande, loggande och reaktiva objekt.

Lektion 4 av 413 steg

Praktiska användningsområden för Proxy är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Proxies i praktiken

Nu kombinerar Ni proxies och Reflect för att lösa verkliga problem: validering, loggning, standardvärden och mycket mer. Varje mönster omsluter ett vanligt objekt utan att ändra det.

Valideringswrapper

Tillämpa ett schema: avvisa alla skrivningar som inte uppfyller en regel. Target förblir rent eftersom felaktiga data aldrig lagras.

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

Loggningswrapper

Spåra varje läsning och skrivning för felsökning genom att vidarebefordra via Reflect efter loggningen.

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

Standardvärden

Returnera ett reservvärde för alla egenskaper som saknas, så att läsningar aldrig ger undefined.

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

Negativ arrayindexering

Gör så att arrayer stöder Python-liknande negativa index genom att översätta dem i en get-trap.

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

Skrivskyddad vy

Exponera ett objekt som kan läsas men aldrig skrivas till, vilket är användbart för att skydda delad konfiguration.

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

Räkna åtkomster

Spåra hur många gånger varje egenskap läses genom att lagra antalen utanför target.

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

Beräknade virtuella egenskaper

Exponera härledda värden som inte lagras, utan beräknas på nytt vid varje läsning.

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

Kasta undantag vid okända läsningar

Upptäck stavfel tidigt genom att kasta ett undantag när kod läser en egenskap som inte finns.

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

Kombinera ansvarsområden

Verkliga wrappers kombinerar ofta validering och loggning i en handler, där varje trap vidarebefordrar till Reflect.

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

Varför dessa mönster spelar roll

Proxies lägger till tvärgående funktionalitet, validering, loggning, standardvärden och åtkomstkontroll utan att förorena det ursprungliga objektet eller dess anropare. Det är precis så reaktiva ramverk observerar tillståndsändringar. Använd dem när Ni behöver transparent avlyssning.

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;

Snabbtest

Vilken proxy-trap ska Ni använda för att avvisa ogiltiga värden innan de lagras?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Praktiska användningsfall för proxies

Ni har tillämpat proxies på verkliga problem:

  • Validering i set-trapen avvisar felaktiga data.
  • Loggning spårar läsningar och skrivningar via Reflect.
  • Standardvärden och virtuella egenskaper finns i get-trapen.
  • Skrivskyddade vyer, åtkomsträkning och strikt stavningskontroll omsluter alla objekt transparent.
Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
59
Lektioner
200
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Praktiska användningsområden för Proxy” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Praktiska användningsområden för Proxy”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Praktiska användningsområden för Proxy”?

Bygg validerande, loggande och reaktiva objekt. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Praktiska användningsområden för Proxy”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Skapa en Proxy
  2. get- och set-fällor
  3. Reflect-API:t
  4. Praktiska användningsområden för Proxy
← Tillbaka till JavaScript Academy