JavaScript Academy · Oppitunti

get- ja set-ansat

Mukauttakaa ominaisuuksien lukemista ja kirjoittamista.

Oppitunti 2/413 vaihetta

get- ja set-ansat on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

get- ja set-trapit

get- ja set-trapit ovat yleisimmin käytettyjä proxyn koukkuja. Ne sieppaavat ominaisuuksien lukemisen ja kirjoittamisen, joten voitte muuntaa arvoja, validoida syötteitä tai kirjata käyttöä.

get-trapin allekirjoitus

get(target, property, receiver) suoritetaan jokaisella ominaisuuden lukemisella. Palauttakaa mitä tahansa, minkä haluatte kutsujan näkevän.

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

console.log(proxy.price);

Oletusarvot get-trapin avulla

get-trap voi tarjota puuttuville ominaisuuksille oletusarvon sen sijaan, että palauttaisi undefined.

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

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

Luettujen arvojen muuntaminen

get-trap voi muokata arvoja niiden palautusvaiheessa, esimerkiksi muuttaa merkkijonot isoiksi kirjaimiksi.

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

console.log(proxy.name);

set-trapin allekirjoitus

set(target, property, value, receiver) suoritetaan jokaisella kirjoituksella. Sen on palautettava true onnistumisen merkiksi, muuten strict-tilassa heitetään poikkeus.

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

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

Validointi set-trapissa

set-trapin perinteinen käyttötarkoitus on validointi: virheelliset arvot hylätään ennen kuin ne päätyvät kohdeolioon.

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

Arvojen muuntaminen set-trapissa

Hylkäämisen lisäksi set-trap voi normalisoida syötteen, esimerkiksi poistamalla merkkijonoista niitä ympäröivät tyhjät merkit ennen tallentamista.

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

Molempien operaatioiden lokitus

Yhdistämällä get- ja set-trapit voitte jäljittää jokaisen käytön. Se on erittäin hyödyllistä tutkittaessa, miten oliota käytetään.

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

Vain luku -tilan pakottaminen

Kirjoitukset aina hylkäävä set-trap muuttaa proxyn kohdeolion vain luku -näkymäksi.

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

Symboliavaimet ja sisäiset toiminnot

Trapit käynnistyvät myös symboliavaimille. Olkaa tarkkana: kaikkien ominaisuuksien, myös sisäisten symbolien, lokitus voi tuottaa paljon turhaa tulostetta, joten suodattakaa tarvittaessa.

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

console.log(proxy.a);

Miksi getillä ja setillä on merkitystä

Yhdessä nämä trapit mahdollistavat validoinnin, lasketut ominaisuudet, oletusarvot, lokituksen ja reaktiivisuuden ilman kohdeolion muokkaamista. Ominaisuuksien suora kirjoittaminen trapien sisällä, kuten target[prop] = value, sisältää kuitenkin reunatapauksia. Seuraavaksi käsiteltävä Reflect-ohjelmointirajapinta hoitaa ne oikein.

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

Pikatarkistus

Mitä set-trapin on palautettava onnistuneen sijoituksen merkiksi?

Vastaa interaktiivisessa oppitunnissa

Kertaus: get- ja set-trapit

Opitte tärkeimmät proxy-trapit:

get(target, prop, receiver) sieppaa lukemiset; palauttakaa mikä tahansa arvo.
set(target, prop, value, receiver) sieppaa kirjoitukset; palauttakaa true onnistumisen merkiksi.
Käyttäkää niitä oletusarvoihin, muunnoksiin, validointiin ja lokitukseen.
Käyttäkää trapien sisäiseen oikeaoppiseen käsittelyyn Reflect-oliota, jota käsitellään seuraavaksi.

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 ”get- ja set-ansat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “get- ja set-ansat”. 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 ”get- ja set-ansat”?

Mukauttakaa ominaisuuksien lukemista ja kirjoittamista. 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 2/4.

Kuinka kauan ”get- ja set-ansat”-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