Jos olet ohjelmoinut JavaScriptillä jonkin aikaa, olet varmasti kuullut... nuolifunktiot ja kuuluisa erikoiskäyttäytyminen tätäJa on myös melko todennäköistä, että pääsi on räjähtänyt useammin kuin kerran yrittäessäsi ymmärtää miksi. tätä Yksi asia pätee normaaliin funktioon ja jokin täysin eri asia nuolifunktioon.
Näiden kahden käsitteen hallitseminen ei ole vain teoriakysymys: se on avain kirjoittamiseen Moderni koodi JavaScriptissä ja ReactissaYmmärrys siitä, miten tapahtumankäsittelijät toimivat, miten konteksti käyttäytyy luokkien sisällä, miten asynkroniset takaisinkutsut ratkaistaan Node.js:ssä ja miksi tiettyjä toimintamalleja pidetään nykyään hyvinä käytäntöinä.
Ensinnäkin: nopea katsaus JavaScriptin funktioihin
JavaScriptissä funktioita voi deklaroida useilla eri tavoilla, ja jokaisella tavalla on vaikutusta niiden toimintaan. tätä, In laajuus ja tällä hetkellä funktio on saatavilla koodissa.
Funktion deklarointi
Klassinen funktion määrittely käyttää avainsanaa toiminto ja nimi. Tällaiset funktiot ovat "korotettuja" (nosto) sen laajuusalueen alussa, jossa ne deklaroidaan, mikä mahdollistaa funktion kutsumisen jo ennen sen määrittelyä tiedostossa.
Perinteisellä tavalla ilmoitetussa funktiossa arvon tätä määräytyy sen mukaan, miten Funktiota kutsutaan: jos sitä kutsutaan olion metodina, jos sitä käytetään yhdessä uusi, jos se on tiukassa tilassa, jos se vaihtaa tilaan soittaa, käyttää o sitovatjne. Tämä joustavuus on tehokasta, mutta se on myös monien virheiden lähde monimutkaisessa koodissa.
Funktion lauseke
Voit myös määrittää anonyymin tai nimetyn roolin käyttäjälle muuttujaTässä tapauksessa itse funktiota ei herätetä, vain muuttujan määrittely herätetään (jossa oli), mutta ei sen arvoa. antaa y const Et voi käyttää sitä edes ennen sen määritelmäriviä, koska ajallinen kuollut alue.
Näillä funktioilla on sama malli tämä dynamiikka Toisin kuin klassisissa deklaraatioissa: niiden arvo riippuu aina kutsukontekstista, joten ne pysyvät herkkinä sille, miten välität ne takaisinkutsuna tai miten käytät niitä luokkien ja olioiden sisällä.
Mitä nuolifunktiot tarkalleen ottaen ovat?
Nuolifunktiot esiteltiin ECMAScript 2015 (ES6) kätevämpänä, kompaktimpana ja ilmaisuvoimaisempana tapana määrittää funktioita, erityisesti takaisinkutsuja ja funktionaalista ohjelmointia varten metodeilla, kuten kartta, suodattaa o vähentää.
Sen perussyntaksi koostuu parametriluettelosta, jota seuraa operaattori => ja sitten yksi ilme tai koodilohkoTämä kompakti muoto tekee koodista tehokkaampaa. luettava monissa tilanteissa, joissa aiemmin piti kirjoittaa pitkiä ja toistuvia anonyymejä funktioita.
Nuolifunktioiden perussyntaksi
Nuolifunktiot tukevat useita syntaksimuunnelmia, jotka kaikki perustuvat samoihin sääntöihin, mutta joissa on oikoteitä yksinkertaisempiin tapauksiin. Kunkin muodon ymmärtäminen auttaa sinua kirjoittamaan paremmin. puhdistava koodi Tunnistan nopeasti, mitä kukin takaisinsoitto tekee.
- Ilman parametrejaNuolen edessä käytetään tyhjiä sulkeita ja sen jälkeen yleensä lauseketta.
const getMessage = () => "Hola"; - Yksi parametriVoit jättää parametrin nimen ympärillä olevat sulkeet pois, mikä tekee koodista ytimekkäämmän.
const square = x => x * x; - Useita parametrejaSinun on aina käytettävä sulkeita niiden ympärillä ja erotettava ne pilkuilla.
const sum = (a, b) => a + b; - Yhden lausekkeen runkoJos et käytä aaltosulkeita, lauseke palautetaan tietyllä tavalla. implisiittinen ilman, että tarvitsee kirjoittaa palata.
- Monirivinen runkoJos käytät hammasrautoja, sinun on kirjoitettava palata eksplisiittisesti palauttaakseen arvon, aivan kuten normaalissa funktiossa.
Yleinen virhelähde on unohtaa palata Kun siirryt yksirivisestä versiosta loogiseen lausekkeeseen, jossa on aaltosulkeita, funktiosi alkaa yhtäkkiä palauttaa määrittelemätön Eikä ole selvää miksi.
Nuolifunktiot ja literaaliobjektit
Jos yhden lausekkeen nuolifunktio palauttaa kirjaimellinen objektiSinun on suljettava tuo objekti sulkeisiin, jotta hakumoottori ei erehdy luulemaan sitä funktiolohkon aluksi. Se on pieni syntaksiansa, joka yllättää monet.
Muussa tapauksessa tulkki tulkitsee avaimet tyhjiksi lohkoiksi, eikä funktiosi palauta objektia, vaan määrittelemätönTämä aiheuttaa vaikeasti jäljitettäviä virheitä, kun yrität käyttää ominaisuuksia, joita ei koskaan palautettu.
Nuolifunktiot ja niiden käyttäytyminen
Nuolifunktioiden todellinen erottava tekijä ei ole syntaksi, vaan niiden tämän malliVaikka perinteisillä funktioilla on tämä dynamiikka Nimestään riippuen nuolifunktioilla on tämä sanastoEli ne vangitsevat Tämä on alueelta, jolla ne on luotu ja he pitävät sen muuttumattomana.
Tämä tarkoittaa, että nuolifunktion sisällä tätä Sitä ei voi muuttaa soittaa, käyttää ni sitovatEikä se riipu siitä, käytätkö sitä takaisinkutsuna tapahtumankäsittelijässä vai välitätkö sen toiselle funktiolle. Sillä on aina sama arvo kuin sillä oli sen ulkopuolella määrittelyhetkellä.
Miten tämä toimii normaaleissa funktioissa?
Funktiossa, joka on ilmoitettu toiminto, arvo tätä Se riippuu asiayhteydestä:
- Jos kutsut funktiota muodossa objektin metodi, tätä Osoita kyseistä kohdetta.
- Jos kutsut sitä ilman kontekstia ei-tiukassa tilassa, tätä viittaus globaali objekti (ikkuna selaimessa, globaali Node.js:ssä).
- Jos käytät uusi, tätä se sitten osoittaa kohti vasta luotu ilmentymä.
- Jos haet soittaa, käyttää o sitovat, voit pakottaa arvon tätä manuaalisesti valitsemaasi kohteeseen.
Tiukassa tilassa, jos kutsut normaalia funktiota ilman oliota vastaanottajana ja käyttämättä soittaa tai samankaltainen, tätä tulee olemaan määrittelemätönSiksi monissa nykyaikaisissa esimerkeissä näet funktioita, jotka alkavat merkeillä 'use strict' välttääkseen hiljaisia virheitä ja pakottaakseen johdonmukaisempaan käyttäytymiseen.
Miten tämä toimii nuolifunktioissa?
Nuolifunktioiden tapauksessa tätä Sitä ei lasketa uudelleen kutsuttaessa; se otetaan suoraan alue, jolla ne määriteltiinEli ne käyttäytyvät samalla tavalla kuin miten muuttujat siepataan sulkemisella (sulkeminenHe katsovat ulospäin ja muistavat tuon arvon ikuisesti.
Tällä on useita erittäin tärkeitä seurauksia jokapäiväiseen elämääsi:
- Et voi käyttää nuolifunktiota, kuten rakentaja kanssa uusikoska heillä ei ole omia tätä eikä sopivaa prototyyppiä.
- Nuolifunktion kutsuminen soittaa o käyttää ei muuta arvoa tätäVoit kuitenkin välittää loput argumentit normaalisti.
- Nuolifunktioina luotujen objektien metodeissa tätä Se ei osoita esineeseen, vaan ylempi ympäristö (esimerkiksi ikkuna tai moduuli), mikä on lähes aina vika.
Keskeinen pointti on, että nuolifunktiot ovat ihanteellisia silloin, kun haluat Tämä sisäinen on samanlainen kuin ulkoinen.Mutta ne ovat huono idea, kun tarvitset reaaliobjektimenetelmä tai kun aiot luoda jonkin instanssin uusi.
Arrow-funktiot, luokat ja React
Maailman suhtautua ja JavaScript-luokkien käsittely yleensä tätä Se on arkaluontoinen asia. Luokan komponentit periytyvät React.Component He käyttävät menetelmiä, joilla tätä on johdonmukaisesti osoitettava komponenttiesiintumiin voidakseen käyttää this.props y tämä.tila.
Klassisen luokkasyntaksin avulla määritellyillä metodeilla arvon tätä Se voi "kadota", kun metodi välitetään tapahtumakutsuna, esimerkiksi klikkaamallaSiksi monissa vanhemmissa opetusohjelmissa näet kuvioita, kuten this.metodo.bind(tämä) konstruktorissa tai suoraan JSX:ssä, mitä nykyään pidetään melko monisanaisena.
Tyypillisiä tällaisia sidontamalleja Reactissa
Luokkakomponentissa oli historiallisesti neljä päätapaa varmistaa, että tätä viittaa aina komponenttiin, kun sitä kutsutaan tapahtumankäsittelijästä:
- käyttö sitovat menetelmässä tuottaa, mikä varmistaa kontekstin, mutta luo uuden funktion jokaiseen renderöintiin.
- Tee sitoa konstruktorissa välttääksesi funktion toistamista yhä uudelleen ja uudelleen, säilytä yksi viittaus.
- Määrittele käsittelijä seuraavasti luokan ominaisuus nuolifunktiolla, hyödyntäen sitä tosiasiaa, että nuolifunktiot tallentavat tätä tapauksesta.
- Käyttää nuolifunktio JSX:ssä rivin sisällä, välittämällä nuolifunktion suoraan attribuutille klikkaamalla tai vastaava.
Käytännössä mahdollisuus määrittää käsittelijäksi luokan ominaisuus nuolifunktion avulla Siitä tuli kätevin kaava: kirjoitat vähemmän koodia, vältät tekemästä sitovat käyttöohje ja tätä pyri aina komponenttiin ilman yllätyksiä.
Nuolifunktiot funktiokomponenteissa
Saapuessaan toiminnalliset komponentit ja koukutReact nojaa paljon vahvemmin nuolifunktioihin. Useimmat nykyaikaiset komponentit on toteutettu nuolinä. vakio OmaKomponentti = () => { … }Tämä tekee nuolifunktioiden käytöstä luonnollista ja johdonmukaista koko puussa.
Näissä komponenteissa on yleistä yhdistää nuolifunktioita muihin ES6-ominaisuuksiin, kuten tuhoaminen, malli literaalit, kolmiosaiset operaattorit, levitä ja taulukkometodit, kuten kartta, suodattaa y vähentää, mikä rakentaa erittäin ilmaisuvoimaisen syntaksin, mutta sellaisen, joka vaatii hyvää kontekstin käsittelyä ja muuttumattomuuden säilyttämistä.
Tämä globaalissa kontekstissa, yksittäiset objektit ja toiminnot
Ymmärtääksemme, miksi nuolifunktiot muuttavat peliä niin paljon, kannattaa tarkastella niiden toimintaa. tätä erilaisissa natiiveissa JavaScript-konteksteissa, sekä selaimessa että Node.js:ssä.
Että selaimen globaali laajuusminkään funktion tai moduulin ulkopuolella, tätä osoita kohdetta ikkunaTämä tarkoittaa, että mikä tahansa muuttuja, joka on ilmoitettu oli Ylemmällä tasolla se riippuu kyseisestä globaalista objektista ja on käytettävissä sekä nimen että ikkunan.nimiTätä pidetään huonona käytäntönä monimutkaisissa sovelluksissa globaalin saastumisen vuoksi.
tämä kirjaimellisten objektien sisällä
Kun määrittelet kirjaimellinen objekti Perinteisillä menetelmillä jokainen menetelmä saa tätä joka viittaa itse objektiin sitä kutsuttaessa obj.method()Tämä on vakiotapa käyttää sisarkiinteistöjä osoitteessa tämä.ominaisuus ilman välimuuttujien tarvetta.
Ongelma syntyy, kun nämä menetelmät korvataan ns. nuolifunktiotKoska meillä ei ole tämä omaNuolifunktio tallentaa ulkoisen `this`-metodin, joka on todennäköisesti globaali tai moduulin `this`-metodi. Tämän seurauksena et voi käyttää objektin ominaisuuksia metodin sisällä käyttämällä tätä, rikkoen täysin alkuperäisen suunnittelun tarkoituksen.
Tämä on löysien funktioiden ja tiukan tilan sisällä
Perinteisissä "unplugged"-funktioissa, joissa ei ole vastaanottavaa objektia, arvon arvo tätä Riippuu siitä, onko koodia tiukka tila Tai sitten ei. Tarkkaan ottaen se palaa takaisin globaali objekti, vaikka tarkkaan ottaen siitä tulee nimenomaisesti määrittelemätönvälttääkseen vaarallisia toimia maailmanlaajuisesti.
Tämä toiminta muuttuu dramaattisesti, kun kapseloit koodisi ES-moduuleihin, nykyaikaisiin paketoijiin tai IIFE-elementteihin, joissa globaali voi olla erilainen tai sitä ei ole sidottu mihinkään. tätä tavalliseen tapaan, etenkin Node.js, jossa arkiston pääasiallinen soveltamisala on moduuli eikä globaalia.
soittaa, hakea, sitoa ja niiden suhde tähän
JavaScript tarjoaa kolme laajalti käytettyä menetelmää kontekstin hallintaan klassisten funktioiden sijaan: soittaa, käyttää y sitovatNe kaikki antavat sinun hallita eksplisiittisesti, minkä arvon se ottaa. tätä kun funktio suoritetaan.
Nämä menetelmät toimivat vain funktiolla deklaroidut funktiot (tai vastaavia), koska nuolifunktiot jättävät huomiotta kaikki yritykset muuttaa niiden `tämä`-ominaisuutta. Siksi kaikki kolme ovat niin hyödyllisiä työskenneltäessä vanhojen API-rajapintojen, vanhojen luokkien tai mallien kanssa, joissa haluat käyttää samaa funktiota uudelleen eri objekteissa.
kutsu ja käytä: kutsu nimenomaisesti tällä
niin soittaa kuten käyttää ne suorittavat toiminnon välittömästiAinoa ero on argumenttien välitystavassa. Molemmissa tapauksissa ensimmäinen välitettävä parametri on muunnettava objekti. tätä funktion sisällä.
kanssa soittaa Seuraavat argumentit esitetään yksi kerrallaan, kun taas käyttää He esiintyvät ikään kuin ryhmäTämä sopii erittäin hyvin tilanteisiin, joissa sinulla on jo argumenttiluettelo kokoelmana ja haluat lisätä sen sellaisenaan kutsuun.
sidonta: luo uusi funktio, jossa käytetään `tämä`-rajausta
Menetelmä sitovat Se ei suorita funktiota tällä hetkellä, vaan luo uusi toiminto kanssa tämä pysyvästi liitetty määrittämällesi objektille. Se on kuin luotaisiin alkuperäisestä "erikoisversio", joka toimii aina kyseisessä kontekstissa.
Tämä malli on hyvin yleinen oliometodien välittämisessä API-rajapinnoille, jotka myöhemmin kutsuvat niitä esimerkiksi tapahtumakutsuina menettämättä alkuperäistä kontekstia. Ennen nuolifunktioiden yleistymistä sitovat Se oli yksi selkeimmistä tavoista varmistaa, että luokkametodi osoitti edelleen oikeaan instanssiin.
Miksi nuolifunktiot ovat ihanteellisia takaisinkutsuille?
Yksi syy siihen, miksi nuolifunktiot ovat valloittaneet JavaScript-ekosysteemin, on niiden soveltuvuus asynkroniset takaisinkutsut ja funktionaalinen ohjelmointi. Kun työskentelet APIen, kuten setTimeout, setInterval, Promises Tai Node.js-tapahtumasilmukan avulla sinun on usein päästävä käsiksi ulkoiseen kontekstiin ilman, että se vääristyy.
Ennen ES6:tta käytettiin temppuja, kuten tallentamista vakio self = this o vakio, joka = tämä ennen takaisinkutsutoimintoon siirtymistä, jotta oikeaan objektiin voidaan edelleen viitata funktion sisältä. Nuolifunktiot tekevät tästä tarpeetonta kaappaamalla automaattisesti Tämä ulkoinen ja säilyttää sen.
Nuolifunktiot ja tapahtumasilmukka Node.js:ssä
En Node.js, jossa suurin osa mielenkiintoisesta koodista pyörii Asynkroninen I/O (tiedostot, verkko, ajastimet), nuolifunktioiden yhdistäminen mallin kanssa tapahtumasilmukka ja takaisinkutsujonot Se yksinkertaistaa elämää paljon. Joka kerta, kun annat funktion, kuten kahvan, fs.readFileLähetätpä sitten HTTP-palvelimelle tai mihin tahansa libuv-operaatioon, nuolifunktiot auttavat pitämään viittaukset vierekkäisiin muuttujiin ja moduulikonteksteihin vapaina yllätyksistä.
Lisäksi mikrotehtäväjonoissa, kuten Promises o prosessi.seuraavaRipukeOn hyvin yleistä kirjoittaa lyhyitä takaisinkutsuja, kuten sitten o saalis nuolisyntaksin avulla hyödyntäen molempia implisiittinen paluu kuin tämä sanasto, mikä tekee koodista deklaratiivisemman ja ilmaisuvoimaisemman.
Milloin nuolifunktioita EI pitäisi käyttää?
Vaikka nuolifunktiot saattavat vaikuttaa taikaratkaisulta kaikkiin ongelmiin, on olemassa tilanteita, joissa niiden käyttö on suoraan kielteisesti vaikuttava ja jopa aiheuttaa bugeja, joita on vaikea havaita.
Yksi niistä, kenties tärkein, on ns. objektien tai luokkien metodit, jotka tarvitsevat oman `tämä`-ominaisuudenToinen on se, kun haluat luoda konstruktorit tai käyttää prototyyppien ja periytymisen tukemia olio-ohjelmoituja malleja, joissa puuttuminen prototyyppi ja sen oma konteksti tarkoittaa, että nuolifunktiot eivät yksinkertaisesti sovi.
Vältä nuolifunktioiden käyttöä oliometodeina.
Jos määrittelet objektin metodin nuolifunktiolla, Tämä sisäinen ei viittaa objektiinvaan pikemminkin kontekstiin, jossa kyseinen objekti määriteltiin. Tämä rikkoo odotukset keneltä tahansa koodia lukevalta ja sitä käyttävältä. tämä.ominaisuus menetelmän sisällä.
Suositeltu tapa kirjoittaa metodeja, jotka ovat riippuvaisia tätä Kyse on klassisen syntaksin käytön jatkamisesta literaaliobjekteissa tai näiden metodien deklaroinnista standardoidulla tavalla luokissa, varaamalla nuolifunktiot sisäisille takaisinkutsuille, joiden on kaapattava tätä ylivoimaisemmasta menetelmästä.
Älä käytä nuolifunktioita konstruktoreina
Nuolitoiminnot puuttuvat [[Rakentaa]], sisäinen mekanismi, joka mahdollistaa funktion kutsumisen uusiSiksi niiden käyttäminen konstruktoreina tuottaa TyyppivirheHeilläkään ei ole omia. prototyyppiSiksi et voi ripustaa jaettuja metodeja instanssien käyttöön.
Jos suunnittelusi vaatii uudelleenkäytettäviä instansseja, joilla on yhteisiä ominaisuuksia ja metodeja, sinun kannattaa valita clases tai perinteisillä konstruktorifunktioilla, jolloin nuolifunktiot jäävät tilattomalle logiikalle tai puhtaasti toiminnallisille apuohjelmille.
Suhde muihin JavaScriptin moderneihin ominaisuuksiin
Nuolifunktioita käytetään harvoin yksinään; ne kulkevat lähes aina käsi kädessä muiden ominaisuuksien kanssa Moderni ECMAScript jotka vaikuttavat myös siihen, miten järjestät ja ymmärrät koodia. Joitakin tärkeimpiä ovat antaa y const, muuttumattomuus, tuhoaminen ja levityssyntaksi.
Niiden oikean yhdistämisen osaaminen mahdollistaa erittäin ytimekkäiden nuolifunktioiden kirjoittamisen, jotka muuntavat dataa taulukkometodeilla, kuten kartta, suodattaa y vähentääsäilyttäen aina alkuperäisen tilan ehjänä, mikä on ratkaisevan tärkeää ympäristöissä, kuten React, joissa muuttumattomuusmalli on normi.
anna, vakio ja muuttumattomuus
Saapuminen antaa y const Se mahdollisti työskentelyn lohkovaikutusalueiden ja uudelleenmäärittämättömien viitteiden kanssa. Nuolifunktioiden kanssa on nykyään yleistä määrittää funktiot muodossa vakio funktio = () => {…}varmistaen, että funktion sisältävää muuttujaa ei korvata.
Tietorakenteissa, kuten taulukoissa ja olioissa, muuttumattomuuden säilyttämistä edistetään käyttämällä Object.freeze kun haluat välttää syvällisiä muutoksia, ja hajautettujen operaatioiden ja puhtaiden metodien avulla, kun sinun on luotava muokatut kopiot Alkuperäisen muuttamisen sijaan erityisen tärkeä asia renderöinnissä tai tilassa riippuu muutosten havaitsemisesta.
Mallipohjat, kolmiosaiset ja oikosulku
Esimerkiksi JSX:ssä takaisinkutsuja renderöidessä tai HTML-merkkijonoja rakennettaessa on lähes väistämätöntä sekoittaa nuolifunktioita malli literaalit (takaisinmerkit) ja operaattorit, kuten kolmiosainen tai oikosulun arviointiNäiden operaattoreiden avulla voit kirjoittaa erittäin ilmeikkäitä rivinsisäisiä ehtoja, jotka sopivat erittäin hyvin nuolifunktioiden deklaratiiviseen tyyliin.
Mallipohjaisten literaalien sisällä lausekkeet ${…} Ne ratkaistaan samalla leksikaalisella laajuudella, joka dominoi nuolifunktioiden `tämä`-operaattoria, joten on tärkeää olla selvää, mitä muuttujia ja mitä kontekstia käytetään kussakin interpoloinnissa, jotta vältetään epäselvä käyttäytyminen.
Nuolifunktiot iteraatioissa ja kokoelmissa
Yksi alueista, joilla nuolifunktioilla on ollut suurin vaikutus, on käsittely taulukot ja kokoelmatLyhyiden takaisinkutsujen välittäminen metodeille, kuten kartta, suodattaa, löytää o vähentää Siitä tulee huomattavasti luettavampi nuolisyntaksin avulla.
Esimerkiksi luettelon merkintöjen suodattaminen luokan perusteella tai API-tulosten muuntaminen sisäisiksi tietorakenteiksi muuttuu paljon deklaratiivisemmaksi, ja yhdistettynä tuhoaminen Funktion parametreista on helppo poimia vain tarvittavat ominaisuudet.
kartoita, suodata, vähennä ja yrityksesi
Tyypillinen yhdistelmä on yleensä jotain tällaista: list.filter(item => condition).map(item => transformation)useiden nuolifunktioiden ketjuttaminen taulukkometodeihin. Jokainen niistä perii `this`-attribuutin kontekstista, jossa se on määritelty, vaikka useimmissa näissä tapauksissa `this`-attribuuttia ei edes käytetä, vaan pikemminkin eksplisiittisiä parametreja, mikä vahvistaa funktionaalista tyyliä.
En vähentääTässä tapauksessa, jossa hallitset iteraatiosta toiseen siirtyvää akkumulaattoria, nuolifunktiot mahdollistavat pelkistysoperaation ilmaisemisen hyvin ytimekkäästi, vaikka on suositeltavaa olla käyttämättä liian tiheitä lausekkeita, jos haluat koodin pysyvän ymmärrettävänä muille kehittäjille.
Tuonti, vienti ja moduulit
Nykyaikaisessa JavaScript-ekosysteemissä lähes kaikki koodi on järjestetty seuraavasti: moduulitjoko käyttämällä natiivia syntaksia tuonti ja vienti tai käyttämällä niputusjärjestelmiä, jotka kääntyvät kyseiseen muotoon. Tässä yhteydessä nuolifunktiot sopivat erittäin hyvin uudelleenkäytettäviksi toiminnallisuusyksiköiksi.
On yleistä nähdä yleishyödyllisten palvelujen vienti muodossa const myUtil = (…) => {…} ja sitten tuodaan eri tiedostoihin. Koska jokainen moduuli on omassa laajuusalueessaan, tämä sanasto Nuolifunktioiden konteksti on yleensä moduulin konteksti, mikä useimmissa puhtaissa apuohjelmissa ei ole edes olennaista, koska ne eivät tarvitse kontekstia.
Ulkoisten moduulien ja skriptien parhaat käytännöt
Kun JavaScriptiä käytetään HTML-sivulla, on suositeltavaa ladata se käyttämällä ulkoiset tiedostot ja vältä pitkien rivikohtaisten lohkojen upottamista. Käytä myös attribuuttia tyyppi="moduuli" komentosarjatunnisteessa mahdollistaa modernin syntaksin tuonti ja vienti ja tekee selväksi, että tiedosto suoritetaan tilassa tiukka oletuksena.
Suorituskyvyn osalta moduuliskriptien sijoittaminen pää kanssa lykätä sallii selaimen ladata ja suorittaa koodin ilman renderöinnin estämistä HTML:ää, säilyttäen samalla hyvän käyttökokemuksen. Tässä koko järjestelmässä nuolifunktiot ovat yksinkertaisesti luonnollisin tapa määritellä pieniä uudelleenkäytettävän logiikan osia.
DOM:n lisääminen ja manipulointi modernilla JavaScriptillä
Vaikka tämän aiheen keskipisteenä ovat arrow- ja `this`-funktiot, JavaScriptin roolia on mahdotonta sivuuttaa DOM-manipulointiMenetelmiä, kuten getElementById, querySelector, setAttribute tai sen muokkaaminen tyyli Ne ovat edelleen perustoimintoja, mutta nykyään ne yhdistetään yleensä nuolikutsuihin reagoimaan tapahtumiin ja päivittämään käyttöliittymää.
Työskennellä tapahtuman kuuntelijat käyttäen element.addEventListener('click', e => {...}) Tämä on vakiotapa liittää logiikka käyttäjän vuorovaikutukseen. Näissä käsittelijöissä tätä Nuolifunktion sisällä se ei ole DOM-elementti, vaan ulkoinen konteksti, joten jos tarvitset solmua, sinun on käytettävä itse tapahtumaparametria. e.nykyinenKohde o e.target, sen sijaan, että luotettaisiin tähän kuten vanhojen inline-attribuuttien kanssa.
Synkroninen JavaScript, asynkroninen JavaScript ja takaisinkutsut
Toinen merkittävä alue, jossa nuolifunktioilla on merkitystä, on asynkroninen ohjelmointiJavaScript on yksisäikeinen, ja käyttöliittymän tukkeutumisen välttämiseksi se delegoi hitaat toiminnot selaimen tai Node-APIen tehtäväksi, jotka sitten kutsuvat takaisinkutsujasi, kun ne ovat valmiita.
Välitä nuolifunktiot takaisinkutsuina kohteeseen setTimeout, lupaaHTTP-pyynnöt tai levykäytöt tekevät koodista kompaktimman ja säilyttävät kontekstin ilman lisäkikkoja. Sisäkkäisten takaisinkutsujen vaiheessa kohti Promises ja myöhemmin kohti async / salahankkeensaNuolifunktiot ovat olleet olennainen osa datavirran luettavuuden parantamista.
Kaiken kaikkiaan ymmärrys siitä, miten nuolifunktiot tallentavat tämän leksikaalisestiSen tietäminen, milloin ne ovat paras liittolaisesi ja milloin on parasta jatkaa perinteisten funktioiden käyttöä, sekä sen tietäminen, miten ne yhdistetään moduuleihin, taulukkometodeihin, muuttumattomuuden hyödyntämiseen, luokkiin ja tapahtumasilmukkaan, mahdollistaa todella vankan JavaScriptin ja Reactin kirjoittamisen. Loppujen lopuksi kyse on oikean funktiomuodon valitsemisesta kullekin kontekstille ja sen syntaktisten etujen hyödyntämisestä joutumatta rajatapauksiin, joissa sen "tämä" käyttäytyminen voisi kostautua. Jaa tämä ohjelmointiopas ja JavaScriptin nuolifunktiot.