Če že nekaj časa programirate v JavaScriptu, ste zagotovo že slišali za ... funkcije puščic in znano posebno vedenje taIn precej verjetno je tudi, da vam je glava že večkrat eksplodirala, ko ste poskušali razumeti, zakaj. ta Za običajno funkcijo velja nekaj, za puščično funkcijo pa nekaj povsem drugega.
Obvladovanje teh dveh konceptov ni le stvar teorije: je ključno za pisanje Sodobna koda v JavaScriptu in ReactuRazumevanje delovanja upravljavcev dogodkov, obnašanja konteksta znotraj razredov, reševanja asinhronih povratnih klicev v Node.js in zakaj se določeni vzorci danes štejejo za dobre prakse.
Najprej: hiter pregled funkcij v JavaScriptu
V JavaScriptu lahko funkcije deklarirate na več načinov in vsak način ima posledice za njihovo obnašanje. ta, en el Obseg in trenutno je funkcija na voljo v kodi.
Deklaracija funkcije
Klasična deklaracija funkcije uporablja ključno besedo funkcija in ime. Te vrste funkcij so "povišane" (dviganje) na začetku obsega, kjer so deklarirani, kar omogoča klic funkcije še pred njeno definicijo v datoteki.
V funkciji, deklarirani na tradicionalen način, je vrednost ta se določi glede na kako Funkcija se pokliče: če se pokliče kot metoda objekta, če se uporablja z novo, če je v strogem načinu, če preklopi na klic, veljajo o vežejoitd. Ta prilagodljivost je močna, vendar je tudi vir številnih napak v kompleksni kodi.
Izraz funkcije
Dodelite lahko tudi anonimno ali imenovano vlogo spremenljivkaV tem primeru se sama funkcija ne izzove, ampak se izzove le deklaracija spremenljivke (z var), ne pa tudi njegove vrednosti. Z Naj y const Ne morete ga uporabiti niti pred njegovo definicijsko črto zaradi časovna mrtva cona.
Te funkcije imajo isti model ta dinamika Za razliko od klasičnih deklaracij: njihova vrednost je vedno odvisna od konteksta klica, zato ostanejo občutljive na to, kako jih posredujete kot povratni klic ali kako jih uporabljate znotraj razredov in objektov.
Kaj točno so puščične funkcije?
Funkcije puščic so bile uvedene z ECMAScript 2015 (ES6) kot bolj priročen, kompakten in izrazen način deklariranja funkcij, zlasti za povratne klice in funkcionalno programiranje z metodami, kot so map, filter o zmanjša.
Njegova osnovna sintaksa je sestavljena iz seznama parametrov, ki mu sledi operator => in nato še enega izraz ali kodni blokZaradi te kompaktne oblike je koda učinkovitejša. berljiv v mnogih scenarijih, kjer ste prej morali pisati dolge in ponavljajoče se anonimne funkcije.
Osnovna sintaksa puščičnih funkcij
Puščične funkcije podpirajo več sintaktičnih različic, vse temeljijo na istih pravilih, vendar s bližnjicami za enostavnejše primere. Razumevanje vsake oblike vam pomaga pri njihovem pisanju. čistejša koda Hitro prepoznam, kaj počne vsak povratni klic.
- Brez parametrovPred puščico se uporabljajo prazni oklepaji, za njimi pa običajno izraz.
const getMessage = () => "Hola"; - En sam parameterOklepaje okoli imena parametra lahko izpustite, zaradi česar je koda bolj jedrnata.
const square = x => x * x; - Več parametrovVedno jih morate obdati z oklepaji, ločenimi z vejicami.
const sum = (a, b) => a + b; - Telo enega samega izrazaČe ne uporabite zavitih oklepajev, se izraz vrne na določen način. implicitno brez potrebe po pisanju vrnitev.
- Večvrstično teloČe uporabljate oklepaje, morate napisati vrnitev izrecno vrne vrednost, tako kot v običajni funkciji.
Pogost vir napak je pozabljanje vrnitev Ko preidete iz enovrstične različice v telo z zavitimi oklepaji, da dodate več logike, vaša funkcija nenadoma začne vračati undefined In ni očitno, zakaj.
Funkcije puščic in dobesedni objekti
Če funkcija s puščico z enim izrazom vrne dobesedni predmetTa objekt morate zaviti v oklepaje, da ga programski mehanizem ne zamenja za začetek funkcijskega bloka. To je majhna sintaksna past, ki veliko ljudi preseneti.
V nasprotnem primeru interpreter interpretira ključe kot prazen blok in vaša funkcija ne bo vrnila objekta, ampak undefinedTo povzroča težko sledljive napake, ko poskušate dostopati do lastnosti, ki niso bile nikoli vrnjene.
Funkcije puščic in njihovo obnašanje
Resnično razlikovalni dejavnik puščičnih funkcij ni sintaksa, temveč njihova model tegaMedtem ko imajo tradicionalne funkcije ta dinamika Odvisno od njihovih imen imajo puščične funkcije ta leksikonTo pomeni, da ujamejo To je iz območja, kjer so ustvarjeni in ga ohranjajo nespremenjenega.
To pomeni, da znotraj puščične funkcije, ta Ni ga mogoče spremeniti z klic, veljajo ni vežejoIn ni odvisno od tega, ali ga uporabite kot povratni klic v obdelovalniku dogodkov ali ga posredujete drugi funkciji. Vedno bo imel isto vrednost, kot jo je imel zunaj sebe v času definicije.
Kako to deluje pri normalnih funkcijah?
V funkciji, deklarirani z funkcija, vrednost ta Odvisno od konteksta:
- Če funkcijo pokličete kot metoda objekta, ta Pokažite na ta predmet.
- Če ga pokličete brez konteksta v nestrogem načinu, ta sklicevanje na globalni objekt (okno v brskalniku, globalno v Node.js).
- Če uporabljate novo, ta nato pa kaže na na novo ustvarjen primerek.
- Če se prijavite klic, veljajo o vežejo, lahko vsiliš vrednost ta ročno do predmeta po vaši izbiri.
V strogem načinu, če pokličete običajno funkcijo brez objekta kot sprejemnika in brez uporabe klic ali podobno, ta bo undefinedZato v mnogih sodobnih primerih vidite funkcije, ki se začnejo z 'use strict' da se izognemo tihim napakam in dosežemo bolj dosledno vedenje.
Kako to deluje v puščičnih funkcijah?
V primeru puščičnih funkcij, ta Ob klicu se ne preračuna; vzame se neposredno iz območje, kjer so bili opredeljeniTo pomeni, da se obnašajo podobno kot spremenljivke, ki jih zajame zaprtje (Zaprtje): Gledajo navzven in si to vrednoto zapomnijo za vedno.
To ima več zelo pomembnih posledic za vaše vsakdanje življenje:
- Funkcije puščice, kot je konstruktor z novoker nimajo svojih ta niti ustreznega prototipa.
- Klic puščične funkcije z klic o veljajo ne bo spremenila vrednosti taVendar pa boste ostale argumente lahko posredovali normalno.
- V metodah objektov, ustvarjenih kot puščične funkcije, ta Ne bo kazal na predmet, temveč na zgornje okolje (na primer okno ali modul), kar je skoraj vedno napaka.
Ključni sklep je, da so puščične funkcije idealne, kadar želite, Ta notranji je enak zunanjemu.Ampak so slaba ideja, ko jih potrebuješ metoda resničnih objektov ali ko nameravate nekaj ustvariti z novo.
Funkcije puščic, razredi in React
V svetu Reagirajo in razredov JavaScript na splošno, obravnavanje ta To je občutljivo vprašanje. Komponente razreda, podedovane od React.Component Uporabljajo metode, pri katerih ta mora dosledno kazati na primerek komponente, da lahko dostopa this.props y this.state.
Z metodami, definiranimi s klasično sintakso razredov, je vrednost ta Pri posredovanju metode kot povratnega klica dogodka se lahko "izgubi", na primer Kliknite naZato boste v mnogih starejših vadnicah videli vzorce, kot so this.metodo.bind(this) v konstruktorju ali neposredno v JSX, kar danes velja za precej dolgovezno.
Tipični vzorci vezave v Reactu
V komponenti razreda so v preteklosti obstajali štirje glavni načini za zagotovitev, da ta vedno kaže na komponento, ko jo pokliče upravljalnik dogodkov:
- Uporabite vežejo v metodi donos, kar zagotavlja kontekst, vendar pri vsakem upodabljanju ustvari novo funkcijo.
- Naredite vezava v konstruktorju da se izognemo vedno znova ponovnemu ustvarjanju funkcije, ohranimo eno samo referenco.
- Definiraj upravljalnik kot lastnost razreda s funkcijo puščice, pri čemer izkoriščajo dejstvo, da puščice zajamejo ta primera.
- Uporabite Funkcija puščice v vrstici v JSX, neposredno posredovanje funkcije puščice atributu Kliknite na ali enakovredno.
V praksi je možnost, da se upravljavec deklarira kot lastnost razreda z uporabo puščične funkcije Postal je najbolj priročen vzorec: napišeš manj kode, izogneš se temu, da bi bilo treba narediti vežejo priročnik in ta Vedno si prizadevajte za komponento brez presenečenj.
Funkcije puščic v komponentah funkcij
S prihodom funkcionalne komponente in kljukeReact se veliko bolj zanaša na funkcije puščic. Večina sodobnih komponent je implementiranih kot puščice. const MojaKomponenta = () => { … }Zaradi tega je uporaba puščičnih funkcij naravna in dosledna po celotnem drevesu.
Znotraj teh komponent je običajno kombinirati funkcije puščic z drugimi funkcijami ES6, kot so destrukturiranje, predlogi literal predloge, ternarni operatorji, namaz in metode polj, kot so map, filter y zmanjša, s čimer se ustvari zelo izrazna sintaksa, ki pa zahteva dobro obvladovanje konteksta in nespremenljivost.
To v globalnem kontekstu, posamezni objekti in funkcije
Da bi razumeli, zakaj funkcije puščic tako zelo spremenijo igro, je vredno pregledati, kako se obnašajo. ta v različnih izvornih kontekstih JavaScripta, tako v brskalniku kot v Node.js.
V globalni obseg brskalnika, zunaj katere koli funkcije ali modula, ta pokažite na predmet oknoTo pomeni, da je katera koli spremenljivka deklarirana z var Na višji ravni visi na tem globalnem objektu in je dostopen tako po imenu kot po ime.oknaZaradi globalnega onesnaženja se to v kompleksnih aplikacijah šteje za slabo prakso.
to znotraj dobesednih predmetov
Ko definirate dobesedni predmet Pri tradicionalnih metodah vsaka metoda prejme ta ki se pri klicu nanaša na sam objekt kot obj.method()To je standardni način dostopa do sestrskih nepremičnin z ta.lastnost brez potrebe po vmesnih spremenljivkah.
Težava nastane, ko te metode nadomestite z funkcije puščicKer nimamo ta lastnaFunkcija puščice bo zajela zunanji `this`, ki je verjetno globalni ali modularni `this`. Posledično ne boste mogli dostopati do lastnosti objekta znotraj metode z uporabo ta, kar popolnoma krši prvotni namen zasnove.
To je znotraj ohlapnih funkcij in strogega načina
V tradicionalnih funkcijah, imenovanih "unplugged", brez prejemnega objekta, vrednost ta Odvisno od tega, ali je koda v strog način Ali pa ne. Strogo gledano, spada nazaj v globalni objekt, medtem ko strogo gledano postane eksplicitno undefinedda bi se izognili nevarnim dejanjem za globalno okolje.
To vedenje se drastično spremeni, ko kodo enkapsulirate v module ES, sodobne združevalnike ali IIFE-je, kjer je lahko globalna vrednost drugačna ali ni vezana nanjo. ta na običajen način, še posebej v Node.js, kjer je glavni obseg arhiva področje modul in ne globalnega.
klic, uporaba, vezava in njihov odnos s tem
JavaScript ponuja tri pogosto uporabljene metode namesto klasičnih funkcij za upravljanje konteksta: klic, veljajo y vežejoVsi vam omogočajo, da eksplicitno nadzorujete, kakšno vrednost potrebuje. ta ko se funkcija izvede.
Te metode delujejo samo z funkcije, deklarirane s funkcijo (ali ekvivalente), saj puščične funkcije ignorirajo vsak poskus spreminjanja njihovega `to`. Zato so vse tri tako uporabne pri delu s starejšimi API-ji, starimi razredi ali vzorci, kjer želite isto funkcijo ponovno uporabiti na različnih objektih.
klic in uporaba: klic z eksplicitnim this
tako klic kot veljajo funkcijo izvedejo takojEdina razlika je v načinu posredovanja argumentov. V obeh primerih je prvi parameter, ki ga posredujete, objekt, ki ga je treba pretvoriti. ta znotraj funkcije.
z klic Nadaljnji argumenti so navedeni drug za drugim, medtem ko z veljajo Izdajajo se za matrikaTo se zelo dobro ujema s situacijami, ko že imate seznam argumentov kot zbirko in ga želite v klic vstaviti takšnega, kot je.
vezava: ustvari novo funkcijo s to mejo
Metoda vežejo Trenutno ne izvaja funkcije, ampak namesto tega generira nova funkcija s to trajno povezano na objekt, ki ga določite. To je kot ustvarjanje "specializirane" različice izvirnika, ki se bo vedno obnašala znotraj tega konteksta.
Ta vzorec je zelo pogost za posredovanje metod objektov API-jem, ki jih bodo kasneje poklicali, na primer kot povratne klice dogodkov, ne da bi pri tem izgubili prvotni kontekst. Pred popularizacijo puščičnih funkcij, vežejo To je bil eden najčistejših načinov za zagotovitev, da metoda razreda še naprej kaže na pravilen primerek.
Zakaj so puščične funkcije idealne za povratne klice?
Eden od razlogov, zakaj so puščične funkcije osvojile ekosistem JavaScripta, je njihova primernost za asinhroni povratni klici in funkcionalno programiranje. Pri delu z API-ji, kot so setTimeout, nastaviInterval, Obljublja Ali pa z zanko dogodkov Node.js pogosto potrebujete dostop do zunanjega konteksta, ne da bi se ta popačil.
Pred ES6 so se uporabljali triki, kot je shranjevanje const self = this o konstanta, ki = to pred vstopom v povratni klic, tako da se je mogoče znotraj funkcije še vedno sklicevati na pravilen objekt. Funkcije s puščicami to odpravijo, saj samodejno zajamejo Ta zunanji in ga ohraniti.
Funkcije s puščicami in zanka dogodkov v Node.js
En Node.js, kjer se večina zanimive kode vrti okoli Asinhroni V/I (datoteke, omrežje, časovniki), kombinacija puščičnih funkcij z modelom zanka dogodkov in čakalne vrste za povratne klice To zelo poenostavi življenje. Vsakič, ko posredujete funkcijo, kot je ročaj, fs.readFileNe glede na to, ali pošiljate podatke na strežnik HTTP ali katero koli operacijo libuv, puščice pomagajo preprečiti presenečenja pri sklicevanju na sosednje spremenljivke in kontekste modulov.
Poleg tega v čakalnih vrstah mikroopravil, kot so tiste od Obljublja o process.nextTickZelo pogosto se pišejo kratki povratni klici, kot je POTEM o ulov s sintakso puščic, pri čemer izkoristimo oboje implicitni donos kot ta leksikon, zaradi česar je koda bolj deklarativna in izrazna.
Kdaj NE smete uporabljati puščičnih funkcij?
Čeprav se puščične funkcije morda zdijo čarobna rešitev za vse težave, obstajajo scenariji, kjer je njihova uporaba neposredno kontraproduktivno in celo ustvarja hrošče, ki jih je težko odkriti.
Eden od njih, morda najpomembnejši, je metode objektov ali razredov, ki potrebujejo svoj `this`Druga možnost je, ko želite ustvariti gradbeniki ali uporabite objektno usmerjene vzorce, ki jih podpirajo prototipi in dedovanje, kjer odsotnost Prototip in njegov lastni kontekst pomeni, da puščične funkcije preprosto ne ustrezajo.
Izogibajte se uporabi puščičnih funkcij kot objektnih metod.
Če definirate metodo objekta s puščično funkcijo, Ta notranja vrednost se ne bo sklicevala na objekttemveč kontekstu, v katerem je bil ta objekt definiran. To krši pričakovanja vsakogar, ki bere kodo in jo namerava uporabiti ta.lastnost znotraj metode.
Priporočen način pisanja metod, ki so odvisne od ta Gre za nadaljnjo uporabo klasične sintakse v dobesednih objektih ali deklariranje teh metod na standarden način v razredih, pri čemer se puščične funkcije rezervirajo za notranje povratne klice, ki morajo zajeti ta iz vrhunske metode.
Ne uporabljajte puščičnih funkcij kot konstruktorjev
Funkcije puščic manjkajo [[Konstrukcija]], notranji mehanizem, ki omogoča klic funkcije z novoZato bo poskus njihove uporabe kot konstruktorjev ustvaril Napaka tipaTudi svojih nimajo. PrototipZato ne morete obesiti deljenih metod za instance.
Če vaša zasnova zahteva ponovno uporabne primerke s skupnimi lastnostmi in metodami, se odločite za razredov ali s tradicionalnimi konstruktorskimi funkcijami, pri čemer se puščične funkcije pustijo za logiko brez stanja ali zgolj funkcionalne pripomočke.
Razmerje z drugimi sodobnimi funkcijami JavaScripta
Funkcije puščic se redko uporabljajo ločeno; skoraj vedno gredo z roko v roki z drugimi funkcijami Sodobni ECMAScript ki vplivajo tudi na to, kako organizirate in razumete kodo. Nekateri najbolj povezani so Naj y const, nespremenljivostje destrukturiranje in sintaksa širjenja.
Poznavanje pravilnega kombiniranja vam omogoča pisanje zelo jedrnatih puščičnih funkcij, ki preoblikujejo podatke z metodami polja, kot so map, filter y zmanjšavedno ohranjanje prvotnega stanja nedotaknjenega, kar je ključnega pomena v okoljih, kot je React, kjer je vzorec nespremenljivosti norma.
let, const in nespremenljivost
Prihod Naj y const Omogočalo je delo z blokovnimi območji in s referencami, ki niso bile ponovno dodeljene. V kombinaciji s puščičnimi funkcijami je danes običajna praksa deklarirati funkcije kot const mojaFunkcija = () => {…}, s čimer zagotovimo, da spremenljivka, ki vsebuje funkcijo, ne bo prepisana.
V podatkovnih strukturah, kot so polja in objekti, se nespremenljivost spodbuja z uporabo Zamrznitev objekta ko se želite izogniti globokim spremembam, in z operacijami širjenja in čistimi metodami, ko morate ustvariti spremenjene kopije namesto spreminjanja izvirnika, kar je še posebej pomembno pri upodabljanju ali stanju, ki je odvisno od zaznavanja sprememb.
Literali predlog, ternarni elementi in kratki stik
Pri upodabljanju povratnih klicev, na primer v JSX ali pri gradnji nizov HTML, je skoraj neizogibno mešati funkcije puščic z predlogi literal predloge (povratne kljukice) in operatorji, kot je ternarni ali ocena kratkega stikaTi operatorji vam omogočajo pisanje zelo izraznih vrstičnih pogojev, ki se zelo dobro ujemajo z deklarativnim slogom puščičnih funkcij.
Znotraj literalov predloge so izrazi ${…} Razrešujejo se z istim leksikalnim obsegom, ki prevladuje nad `to` puščičnih funkcij, zato je bistveno, da je jasno, katere spremenljivke in kakšen kontekst se uporabljajo v vsaki interpolaciji, da se izognemo dvoumnemu vedenju.
Funkcije puščic v iteracijah in zbirkah
Eno od področij, kjer so funkcije puščic naredile največjo razliko, je obdelava polja in zbirkePosredovanje kratkih povratnih klicev metodam, kot je map, filter, iskanje o zmanjša S sintakso puščic postane veliko bolj berljivo.
Na primer, filtriranje vnosov na seznamu glede na kategorijo ali preoblikovanje rezultatov API-ja v notranje podatkovne strukture postane veliko bolj deklarativno in v kombinaciji z destrukturiranje Iz parametrov funkcije je enostavno izluščiti le lastnosti, ki jih potrebujete.
zemljevid, filtriranje, zmanjšanje in podjetje
Tipična kombinacija je običajno nekaj takega: seznam.filter(element => pogoj).map(element => transformacija)združevanje več puščičnih funkcij v metode polja. Vsaka od njih podeduje `this` iz konteksta, kjer je definirana, čeprav se v večini teh primerov `this` sploh ne uporablja, temveč eksplicitni parametri, ki krepijo funkcionalni slog.
En zmanjšaV tem primeru, ko upravljate akumulator, ki prehaja iz iteracije v iteracijo, vam puščice omogočajo zelo jedrnato izražanje operacije redukcije, čeprav je priporočljivo, da ne pretiravate z uporabo pretirano gostih izrazov, če želite, da koda ostane razumljiva drugim razvijalcem.
Uvoz, izvoz in moduli
V sodobnem ekosistemu JavaScript je skoraj vsa koda organizirana v modulibodisi z uporabo izvorne sintakse uvozno-izvoznih ali z uporabo sistemov za združevanje, ki se prevajajo v to obliko. V tem kontekstu so puščice zelo primerne kot ponovno uporabne enote funkcionalnosti.
Pogosto se komunalne storitve izvažajo kot const mojUtil = (…) => {…} in nato uvožene v različne datoteke. Ker je vsak modul v svojem obsegu, je ta leksikon Kontekst puščičnih funkcij je ponavadi kontekst modula, kar v večini čistih pripomočkov sploh ni pomembno, saj ne potrebujejo konteksta.
Najboljše prakse z zunanjimi moduli in skripti
Pri nalaganju JavaScripta na strani HTML je priporočljivo, da ga naložite z uporabo zunanje datoteke in se izogibajte vdelavi velikih vrstičnih blokov. Uporabite tudi atribut tip="modul" v oznaki skripta omogoča sodobno sintakso uvozno-izvoznih in jasno pove, da se datoteka izvaja v načinu strogo privzeto.
Glede zmogljivosti, namestitev skriptov modulov v Glava z odložite omogoča brskalniku prenos in izvajanje kode brez blokiranja upodabljanja HTML-ja, hkrati pa ohranja dobro uporabniško izkušnjo. V celotni shemi so puščice preprosto najbolj naraven način za definiranje majhnih delov logike za večkratno uporabo.
Vstavljanje in upravljanje DOM-a s sodobnim JavaScriptom
Čeprav se ta tema osredotoča na puščico in funkcije `this`, ni mogoče prezreti vloge JavaScripta v Manipulacija DOM-aMetode, kot so getElementById, querySelector, nastavi atribut ali spremembo slog Še vedno so osnovni, vendar se danes običajno kombinirajo s povratnimi klici puščic, da se odzovejo na dogodke in posodobijo vmesnik.
Delo z poslušalci dogodkov uporabo element.addEventListener('click', e => {...}) To je standardni način povezovanja logike z interakcijami uporabnikov. V teh rutinah za obdelavo podatkov, ta Znotraj funkcije puščice ne bo element DOM, temveč zunanji kontekst, zato boste morali, če potrebujete vozlišče, uporabiti sam parameter dogodka. e.currentTarget o e.target, namesto da bi se na to zanašali kot pri starih inline atributih.
Sinhroni JavaScript, asinhroni JavaScript in povratni klici
Drugo pomembno področje, kjer funkcije puščic naredijo razliko, je v asinhrono programiranjeJavaScript je enonitni in da bi se izognil blokiranju vmesnika, počasne operacije prenese na brskalnik ali Node API-je, ki nato po končanem postopku pokličejo vaše povratne klice.
Posredujte funkcije puščic kot povratne klice v setTimeout, obljubeZahteve HTTP ali dostopi do diska naredijo kodo bolj kompaktno in ohranjajo kontekst brez dodatnih trikov. V koraku ugnezdenih povratnih klicev proti Obljublja in kasneje proti async/počakajPuščične funkcije so bile bistveni element za berljivost podatkovnega toka.
Na splošno razumevanje, kako puščične funkcije to zajamejo leksikalnoPoznavanje, kdaj so vaš najboljši zaveznik in kdaj je najbolje, da se še naprej zanašate na tradicionalne funkcije, skupaj z znanjem, kako jih kombinirati z moduli, metodami polj, nespremenljivostjo, razredi in zanko dogodkov, vam omogoča pisanje resnično zanesljivega JavaScripta in Reacta; na koncu gre za izbiro prave oblike funkcije za vsak kontekst, izkoriščanje njenih sintaktičnih prednosti, ne da bi pri tem zašli v mejne primere, kjer bi se lahko njeno vedenje »to« obrnilo proti vam. Delite ta programski vodnik in puščične funkcije JavaScript.