JavaScript Academy · Oppitunti

Reflect-API

Välittäkää operaatiot Reflect-metodeilla.

Oppitunti 3/413 vaihetta

Reflect-API on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Reflect

Reflect on sisäänrakennettu olio, jonka metodeilla suoritetaan olioiden oletusarvoiset matalan tason operaatiot, kuten lukeminen, kirjoittaminen ja poistaminen.

Sen metodit vastaavat proxyn trap-tyyppejä yksi yhteen, joten se on ihanteellinen apuväline oikeiden proxyjen kirjoittamiseen.

Reflect.get

Reflect.get(target, prop) lukee ominaisuuden samalla tavalla kuin target[prop], mutta siistinä funktiokutsuna.

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) kirjoittaa ominaisuuden ja palauttaa onnistumisen ilmaisevan arvon true tai false, aivan kuten set-trap odottaa.

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

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

Reflect.has ja deleteProperty

Reflect.has vastaa in-operaattoria ja Reflect.deleteProperty vastaa delete-operaattoria. Molemmat ovat totuusarvon palauttavia funktioita.

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 palauttaa kaikki olion omat ominaisuusavaimet, mukaan lukien symbolit ja luettelemattomat avaimet. Se on kattavampi kuin 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));

Välittäminen proxyn sisällä

Todellinen voima piilee siinä, että trapin sisällä kutsutaan vastaavaa Reflect-metodia oletustoiminnon suorittamiseksi ja lisätään sen ympärille oma mukautettu logiikka.

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

console.log(proxy.v);

set-toiminnon oikea välittäminen

Reflect.set-metodin käyttäminen set-trapin sisällä palauttaa automaattisesti oikean totuusarvon, joten teidän ei tarvitse muistaa palauttaa itse true-arvoa.

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

Miksi vastaanottajalla on merkitystä

receiver-arvon välittäminen Reflect.get- ja Reflect.set-metodeille varmistaa, että getterit ja setterit suoritetaan oikean this-arvon kanssa. Tämä on tärkeää, kun oliot perivät ominaisuuksia toisiltaan.

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) kutsuu funktiota annetulla this-arvolla ja argumenttitaulukolla. Se on siistimpi vaihtoehto kutsulle fn.apply.

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

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

Reflect.construct

Reflect.construct(Cls, argsArray) luo instanssin. Se vastaa kutsua new Cls(...args), mutta käyttää argumenttitaulukkoa.

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

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

Miksi Reflectillä on merkitystä

Reflect tarjoaa funktiomuotoiset ja ennakoitavat versiot olioiden sisäisistä toiminnoista, ja se sopii täydellisesti yhteen proxyjen kanssa: jokainen trap välittää toiminnon vastaavalle Reflect-metodille. Tuloksena on oikeaoppinen ja pelkistetty proxy-koodi. Seuraavaksi sovellatte kaikkea tätä käytännön käyttötapauksiin.

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

Pikatarkistus

Miksi get-trapin sisällä kutsutaan Reflect.get(target, prop, receiver)-metodia eikä käytetä lauseketta target[prop]?

Kertaus: Reflect-ohjelmointirajapinta

Opitte Proxyn kumppanin:

  • Reflect tarjoaa oletusoperaatiot funktiomuodossa: get, set, has, deleteProperty ja ownKeys.
  • Sen metodit vastaavat proxyn trap-tyyppejä yksi yhteen.
  • receiver-arvon käyttäminen Reflect-välityksessä pitää periytymisen toiminnan oikeana.
  • Reflect.apply ja Reflect.construct kutsuvat funktioita ja luovat instansseja siististi.
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

Usein kysytyt kysymykset

Onko oppitunti ”Reflect-API” ilmainen?

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

Välittäkää operaatiot Reflect-metodeilla. 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 3/4.

Kuinka kauan ”Reflect-API”-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

  1. Proxyn luominen
  2. get- ja set-ansat
  3. Reflect-API
  4. Proxyn käytännön käyttötapaukset
← Takaisin: JavaScript Academy