JavaScript Academy · Oppitunti

Proxyn luominen

Käärikää objekteja operaatioiden sieppaamista varten.

Oppitunti 1/413 vaihetta

Proxyn luominen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on Proxy

Proxy käärii olion ja mahdollistaa perustavanlaatuisten operaatioiden, kuten ominaisuuksien lukemisen, kirjoittamisen ja poistamisen, sieppaamisen.

Proxy luodaan koodilla new Proxy(target, handler), jossa käsittelijä määrittää toimintaa mukauttavat trapit.

Tyhjä käsittelijä

Tyhjän käsittelijän kanssa proxy käyttäytyy täsmälleen kohdeolion tavoin. Jokainen operaatio välitetään suoraan eteenpäin.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

Kohde ja proxy jakavat tilan

Proxy ei kopioi kohdetta. Ne viittaavat samaan taustalla olevaan olioon, joten kumman tahansa kautta tehty muutos näkyy molemmissa.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

get-trapin lisääminen

get-trap sieppaa ominaisuuksien lukemiset. Tässä jokainen lukeminen kirjataan ennen arvon palauttamista.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Trapin parametrit

get-trap saa kohteen target, ominaisuuden property nimen ja receiver-vastaanottajan (proxyn). Päätätte itse, mitä palautetaan.

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

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

Lasketut ominaisuudet luettaessa

get-trap voi palauttaa arvoja, joita kohdeolio ei oikeasti tallenna, vaan laskea ne lennossa.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

set-trapin lisääminen

set-trap sieppaa kirjoitukset. Sen on palautettava true onnistumisen merkiksi, muuten sijoitus katsotaan epäonnistuneeksi.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

has-trap

has-trap sieppaa in-operaattorin ja mahdollistaa jäsenyystarkistusten mukauttamisen.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

deleteProperty-trap

deleteProperty-trap sieppaa delete-operaattorin. Palauttakaa true onnistumisen merkiksi.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Saatavilla on monia trappeja

get- ja set-trappien lisäksi proxy tukee muun muassa has-, deleteProperty-, ownKeys-, funktioiden apply- ja construct-trappeja. Toteutatte vain tarvitsemanne trapit.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Miksi proxyilla on merkitystä

Proxyjen avulla voitte lisätä validointia, lokitusta, oletusarvoja ja reaktiivisuutta muuttamatta kohdeoliota. Ne ovat esimerkiksi Vuen reaktiivisuusjärjestelmän perusta. Seuraavaksi syvennytte get- ja set-trappeihin.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Pikatarkistus

Mitä new Proxy(target, handler) luo?

Vastaa interaktiivisessa oppitunnissa

Kertaus: proxyn luominen

Opitte sieppaamaan olioiden operaatioita:

new Proxy(target, handler) käärii olion trapit sisältävään proxyyn.
Tyhjä käsittelijä välittää kaiken suoraan eteenpäin, ja proxy sekä kohdeolio jakavat tilan.
Yleisiä trap-tyyppejä ovat get, set, has, deleteProperty ja ownKeys.
set- ja delete-trappien on palautettava true onnistumisen merkiksi.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Proxyn luominen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Proxyn luominen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Proxyn luominen”?

Käärikää objekteja operaatioiden sieppaamista varten. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Proxyn luominen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy