Ja jau kādu laiku programmējat JavaScript valodā, noteikti esat dzirdējuši par... bultiņu funkcijas un slavenā īpašā uzvedība šīUn ir arī diezgan iespējams, ka jūsu galva ir vairākkārt eksplodējusi, mēģinot saprast, kāpēc. šī Viena lieta attiecas uz parasto funkciju un kaut kas pavisam cits uz bultiņas funkciju.
Šo divu jēdzienu apgūšana nav tikai teorijas jautājums: tā ir rakstīšanas atslēga. Moderns kods JavaScript un React valodāsIzpratne par notikumu apstrādātāju darbību, konteksta uzvedību klasēs, asinhrono atzvanīšanas problēmu risināšanu Node.js vidē un to, kāpēc noteikti modeļi mūsdienās tiek uzskatīti par labu praksi.
Pirmkārt: īss JavaScript funkciju pārskats
JavaScript valodā funkcijas var deklarēt vairākos veidos, un katram veidam ir ietekme uz to darbību. šī, In joma un šobrīd funkcija ir pieejama kodā.
Funkcijas deklarācija
Klasiskā funkciju deklarācijā tiek izmantots atslēgvārds funkcija un nosaukumu. Šāda veida funkcijas ir "paaugstinātas" (pacelšana) darbības jomas sākumā, kur tās tiek deklarētas, kas ļauj funkciju izsaukt pat pirms tās definīcijas failā.
Tradicionālā veidā deklarētā funkcijā vērtība šī tiek noteikts saskaņā ar cik Funkcija tiek izsaukta: ja tā tiek izsaukta kā objekta metode, ja tā tiek izmantota kopā ar jauns, ja tas ir stingrajā režīmā, ja tas pārslēdzas uz zvanīt, piemērot o saistošsutt. Šī elastība ir spēcīga, taču tā ir arī daudzu kļūdu avots sarežģītā kodā.
Funkcijas izteiksme
Varat arī piešķirt anonīmu vai nosauktu lomu mainīgsTādā gadījumā pati funkcija netiek aktivizēta, tiek aktivizēta tikai mainīgā deklarācija (ar VAR), bet ne tā vērtību. Ar ļaut y const To nevar izmantot pat pirms definīcijas līnijas, jo pagaidu mirušā zona.
Šīm funkcijām ir viens un tas pats modelis šī dinamika Atšķirībā no klasiskajām deklarācijām: to vērtība vienmēr ir atkarīga no izsaukšanas konteksta, tāpēc tās paliek jutīgas pret to, kā jūs tās nododat kā atzvanīšanas signālu vai kā jūs tās izmantojat klasēs un objektos.
Kas īsti ir bultiņu funkcijas?
Bultiņu funkcijas tika ieviestas ar ECMAScript 2015 (ES6) kā ērtāku, kompaktāku un izteiksmīgāku veidu, kā deklarēt funkcijas, īpaši atzvanīšanas un funkcionālās programmēšanas vajadzībām ar tādām metodēm kā karte, filtrēt o samazināt.
Tās pamata sintakse sastāv no parametru saraksta, kam seko operators => un tad vienu izteiksme vai koda bloksŠis kompaktais formāts padara kodu efektīvāku. lasāms daudzos scenārijos, kuros iepriekš bija jāraksta garas un atkārtotas anonīmas funkcijas.
Bultiņu funkciju pamata sintakse
Bultu funkcijas atbalsta vairākas sintakses variācijas, kas visas balstās uz vienādiem noteikumiem, bet ar īsinājumtaustiņiem vienkāršākiem gadījumiem. Izpratne par katru formu palīdz tās uzrakstīt. tīrītāja kods Es varu ātri atpazīt katra atzvanīšanas ziņojuma darbību.
- Bez parametriemPirms bultiņas tiek lietotas tukšas iekavas, un parasti pēc tās ir izteiksme.
const getMessage = () => "Hola"; - Viens parametrsVarat izlaist iekavas ap parametra nosaukumu, kas padarīs kodu kodolīgāku.
const square = x => x * x; - Vairāki parametriJums vienmēr jāizmanto iekavas, kas tos ietver, atdalot tos ar komatiem.
const sum = (a, b) => a + b; - Vienas izteiksmes pamattekstsJa neizmantojat cirtainās figūriekavas, izteiksme tiek atgriezta noteiktā veidā. netiešs bez nepieciešamības rakstīt atgriešanās.
- Daudzrindu korpussJa lietojat breketes, jums ir jāraksta atgriešanās skaidri, lai atgrieztu vērtību, tāpat kā parastā funkcijā.
Biežs kļūdu avots ir aizmirstība atgriešanās Kad pārejat no vienas rindas versijas uz pamattekstu ar cirtainām figūriekavām, lai pievienotu vairāk loģikas, jūsu funkcija pēkšņi sāk atgriezt vērtību undefined Un nav skaidrs, kāpēc.
Bultu funkcijas un literālie objekti
Ja vienas izteiksmes bultiņas funkcija atgriež burtisks objektsŠis objekts jāievieto iekavās, lai dzinējs to nesajauktu ar funkciju bloka sākumu. Tas ir neliels sintakses slazds, kas pārsteidz daudzus cilvēkus nesagatavotus.
Pretējā gadījumā interpretētājs interpretē atslēgas kā tukšu bloku, un jūsu funkcija neatgriezīs objektu, bet gan undefinedTas izraisa grūti izsekojamas kļūdas, mēģinot piekļūt īpašībām, kas nekad netika atgrieztas.
Bultu funkcijas un to uzvedība
Bultu funkciju patiesi atšķirīgais faktors nav sintakse, bet gan to šī modeļaLai gan tradicionālajām funkcijām ir šī dinamika Atkarībā no to nosaukumiem bultiņu funkcijām ir šī leksikonaTas ir, viņi uztver Tas ir no apgabala, kurā tie ir radīti un viņi to saglabā nemainīgu.
Tas nozīmē, ka bultiņas funkcijas ietvaros šī To nevar mainīt ar zvanīt, piemērot ni saistošsUn tas nav atkarīgs no tā, vai jūs to izmantojat kā atzvanīšanas funkciju notikumu apstrādātājā vai nododat to citai funkcijai. Tam vienmēr būs tāda pati vērtība, kāda tai bija ārpus tā definēšanas laikā.
Kā tas darbojas parastajās funkcijās?
Funkcijā, kas deklarēta ar funkcija, vērtība šī Tas ir atkarīgs no konteksta:
- Ja funkciju izsaucat kā objekta metode, šī Norādiet uz šo objektu.
- Ja to izsaucat bez konteksta nestingrā režīmā, šī atsauce uz globāls objekts (logs pārlūkprogrammā, globāls Node.js).
- Ja lietojat jauns, šī tad tas norāda uz jaunizveidots gadījums.
- Ja jūs piesakāties zvanīt, piemērot o saistošs, jūs varat piespiesti mainīt vērtību šī manuāli uz izvēlēto objektu.
Stingrā režīmā, ja izsaucat parastu funkciju bez objekta kā uztvērēja un neizmantojot zvanīt vai tamlīdzīgi, šī būs undefinedTāpēc daudzos mūsdienu piemēros ir redzamas funkcijas, kas sākas ar 'use strict' lai izvairītos no klusām kļūdām un piespiestu konsekventāku rīcību.
Kā tas darbojas bultiņu funkcijās?
Bultu funkciju gadījumā šī Tas netiek pārrēķināts, kad tiek izsaukts; tas tiek ņemts tieši no apgabals, kurā tie tika definētiTas ir, tie uzvedas līdzīgi tam, kā mainīgie tiek uztverti ar slēgšanu (slēgšanaViņi raugās uz āru un atceras šo vērtību uz visiem laikiem.
Tam ir vairākas ļoti svarīgas sekas jūsu ikdienas dzīvē:
- Jūs nevarat izmantot bultiņas funkciju, piemēram, konstruktors ar jaunsjo viņiem nav savu šī ne arī atbilstošo prototipu.
- Bultas funkcijas izsaukšana ar zvanīt o piemērot nemainīs vērtību, šīTomēr pārējos argumentus varēsiet nodot normāli.
- Objektu metodēs, kas izveidotas kā bultiņu funkcijas, šī Tas nenorādīs uz objektu, bet gan uz augšējā vide (piemēram, logs vai modulis), kas gandrīz vienmēr ir kļūda.
Galvenais secinājums ir tāds, ka bultiņu funkcijas ir ideāli piemērotas, ja vēlaties Šis iekšējais ir tāds pats kā ārējais.Bet tie ir slikta ideja, kad jums ir nepieciešams reālā objekta metode vai arī, ja plānojat kaut ko izveidot ar jauns.
Bultas funkcijas, klases un React
Pasaulē Reaģēt un JavaScript klašu apstrāde kopumā šī Tas ir delikāts jautājums. No tā mantotās klases komponentes React.Component Viņi izmanto metodes, kurās šī lai piekļūtu, ir konsekventi jānorāda uz komponenta instanci this.props y šis.štats.
Ar metodēm, kas definētas, izmantojot klasisko klases sintaksi, vērtība šī To var "pazaudēt", nododot metodi kā notikuma atzvanīšanas signālu, piemēram, lai onClickTāpēc daudzās vecākās pamācībās jūs redzēsiet tādus modeļus kā this.metodo.bind(this) konstruktorā vai tieši JSX, kas mūsdienās tiek uzskatīts par diezgan daudzvārdīgu.
Tipiski šie saistīšanas modeļi programmā React
Klases komponentā vēsturiski bija četri galvenie veidi, kā to nodrošināt šī vienmēr norāda uz komponentu, kad to izsauc notikumu apstrādātājs:
- Izmantot saistošs metodē raža, kas nodrošina kontekstu, bet katrā renderēšanā izveido jaunu funkciju.
- Izgatavojiet saistīt konstruktorā lai izvairītos no funkcijas atkārtotas izveides atkal un atkal, saglabājot vienu atsauci.
- Definējiet apstrādātāju kā klases īpašība ar bultiņas funkciju, izmantojot faktu, ka bultiņu funkcijas uztver šī gadījumu.
- Izmantot bultiņas funkcija JSX valodā, tieši nododot bultiņas funkciju atribūtam onClick vai līdzvērtīgs.
Praksē iespēja deklarēt apstrādātāju kā klases īpašība, izmantojot bultiņas funkciju Tas kļuva par ērtāko modeli: jūs rakstāt mazāk koda, jūs izvairāties no nepieciešamības darīt saistošs rokasgrāmata un šī vienmēr tiecieties pēc komponenta bez pārsteigumiem.
Bultiņu funkcijas funkciju komponentos
Ar ierašanos funkcionālās sastāvdaļas un āķiReact daudz vairāk paļaujas uz bultiņu funkcijām. Lielākā daļa mūsdienu komponentu tiek ieviesti kā bultiņas. const ManaKomponente = () => { … }Tas padara bultiņu funkciju izmantošanu dabisku un konsekventu visā kokā.
Šajos komponentos ir ierasts apvienot bultiņu funkcijas ar citām ES6 funkcijām, piemēram, iznīcināšana, veidņu literāļi, trīskāršie operatori, izplatīšanās un masīvu metodes, piemēram, karte, filtrēt y samazināt, tādējādi konstruējot ļoti izteiksmīgu sintaksi, taču tādu, kas prasa labu konteksta apstrādi un nemaināmību.
Globālā kontekstā atsevišķi objekti un funkcijas
Lai saprastu, kāpēc bultiņu funkcijas tik ļoti maina spēli, ir vērts pārskatīt to darbību. šī dažādos vietējos JavaScript kontekstos gan pārlūkprogrammā, gan Node.js.
Jo pārlūkprogrammas globālais darbības jomaārpus jebkuras funkcijas vai moduļa, šī norādiet uz objektu logsTas nozīmē jebkuru mainīgo, kas deklarēts ar VAR Augstākā līmenī tas ir saistīts ar šo globālo objektu un ir pieejams gan pēc nosaukuma, gan pēc loga.nosaukumsGlobālā piesārņojuma dēļ tas tiek uzskatīts par sliktu praksi sarežģītos pielietojumos.
tas burtiskos objektos
Kad jūs definējat burtisks objekts Ar tradicionālajām metodēm katra metode saņem šī kas atsaucas uz pašu objektu, to izsaucot kā obj.method()Šis ir standarta veids, kā piekļūt partnerīpašumiem, izmantojot šis.īpašums bez nepieciešamības pēc starpposma mainīgajiem.
Problēma rodas, ja šīs metodes aizstājat ar bultiņu funkcijasTā kā mums nav šī pašaFunkcija `bult` uztvers ārējo `this`, kas, visticamāk, ir globālais vai moduļa `this`. Tā rezultātā jūs nevarēsiet piekļūt objekta īpašībām metodes ietvaros, izmantojot šī, pilnībā laužot sākotnējo dizaina ieceri.
Tas ir brīvo funkciju un stingrā režīma ietvaros
Tradicionālajās funkcijās, ko sauc par "atvienotām", bez uztveroša objekta vērtība šī Tas ir atkarīgs no tā, vai kods ir iekšā stingrs režīms Vai arī nē. Stingri ņemot, tas atgriežas pie globāls objekts, stingri ņemot, tas kļūst nepārprotami undefinedlai izvairītos no bīstamām darbībām globālajā vidē.
Šī uzvedība krasi mainās, ja kodu iekapsulējat ES moduļos, modernos pakotājos vai IIFE, kur globālais var atšķirties vai nebūt saistīts ar šī ierastajā veidā, it īpaši Node.js, kur arhīva galvenais darbības joma ir modulis un nevis globālais.
zvanīt, pieteikties, saistīt un to saistība ar šo
JavaScript piedāvā trīs plaši izmantotas metodes, nevis klasiskās funkcijas konteksta pārvaldībai: zvanīt, piemērot y saistošsTie visi ļauj jums skaidri kontrolēt, kāda vērtība tam nepieciešama. šī kad funkcija tiek izpildīta.
Šīs metodes darbojas tikai ar funkcijas, kas deklarētas ar funkciju (vai ekvivalentus), jo bultiņu funkcijas ignorē jebkuru mēģinājumu mainīt to `this`. Tāpēc visas trīs ir tik noderīgas, strādājot ar mantotajām API, vecām klasēm vai modeļiem, kur vēlaties atkārtoti izmantot vienu un to pašu funkciju dažādiem objektiem.
izsaukt un lietot: izsaukt ar skaidru šo
tā zvanīt kā piemērot viņi nekavējoties izpilda funkcijuVienīgā atšķirība ir argumentu nodošanas veids. Abos gadījumos pirmais nodotais parametrs ir objekts, kas jāpārveido. šī funkcijas ietvaros.
ar zvanīt Turpmākie argumenti tiek minēti viens pēc otra, savukārt ar piemērot Viņi izliekas par masīvsTas ļoti labi iederas situācijās, kad argumentu saraksts jau ir kolekcijas veidā un vēlaties to ievadīt izsaukumā tādu, kāds tas ir.
bind: izveidojiet jaunu funkciju ar `šo` robežu
Metode saistošs Tas šobrīd neizpilda funkciju, bet gan ģenerē jauna funkcija ar tas pastāvīgi saistīts uz norādīto objektu. Tas ir līdzīgi kā izveidot oriģināla "specializētu" versiju, kas vienmēr darbosies šajā kontekstā.
Šis modelis ir ļoti izplatīts objektu metožu nodošanai API, kas tās vēlāk izsauks, piemēram, kā notikumu izsaukumus, nezaudējot sākotnējo kontekstu. Pirms bultiņu funkciju popularizēšanas, saistošs Tas bija viens no tīrākajiem veidiem, kā nodrošināt, ka klases metode turpina norādīt uz pareizo instanci.
Kāpēc bultiņu funkcijas ir ideāli piemērotas atzvanīšanai?
Viens no iemesliem, kāpēc bultiņu funkcijas ir iekarojušas JavaScript ekosistēmu, ir to piemērotība asinhroni atzvanīšanas un funkcionālā programmēšana. Strādājot ar API, piemēram, setTimeout, setInterval, sola Vai arī, izmantojot Node.js notikumu ciklu, jums bieži ir jāpiekļūst ārējam kontekstam, to neizkropļojot.
Pirms ES6 tika izmantoti tādi triki kā taupīšana konstante self = šis o konstante, kas = šis pirms atzvanīšanas uzsākšanas, lai uz pareizo objektu joprojām varētu atsaukties no funkcijas iekšienes. Bultiņu funkcijas padara to nevajadzīgu, automātiski tverot Šis ārējais un saglabāt to.
Bultu funkcijas un notikumu cikls Node.js valodā
En Node.js, kur lielākā daļa interesantā koda griežas ap Asinhronā I/O (faili, tīkls, taimeri), bultiņu funkciju kombinācija ar modeli notikumu cilpa un atzvanīšanas rindas Tas ļoti vienkāršo dzīvi. Katru reizi, kad nodod funkciju, piemēram, turi, fs.readFileNeatkarīgi no tā, vai sūtāt HTTP serverim vai jebkurai libuv darbībai, bultiņu funkcijas palīdz saglabāt atsauces uz blakus esošiem mainīgajiem un moduļu kontekstiem bez pārsteigumiem.
Turklāt mikrouzdevumu rindās, piemēram, sola o process.nextTickIr ļoti bieži rakstīt īsus atzvanīšanas signālus, piemēram, tAD o noķert ar bultiņas sintaksi, izmantojot abus netieša atgriešanās kā šī leksikona, kas padara kodu deklaratīvāku un izteiksmīgāku.
Kad NEDRĪKST izmantot bultiņu funkcijas?
Lai gan bultiņu funkcijas var šķist maģisks risinājums visām problēmām, pastāv scenāriji, kuros to izmantošana ir tieši saistīta ar neproduktīvs un pat rada kļūdas, kuras ir grūti atklāt.
Viens no tiem, iespējams, pats svarīgākais, ir objektu vai klašu metodes, kurām nepieciešams savs `šis`Vēl viens ir tad, kad vēlaties radīt celtniekiem vai izmantot objektorientētus modeļus, ko atbalsta prototipi un mantošana, ja nav prototips un tā paša konteksta dēļ bultiņu funkcijas vienkārši neder.
Izvairieties izmantot bultiņu funkcijas kā objektu metodes.
Ja definējat objekta metodi ar bultiņas funkciju, tad Šis iekšējais elements neatsaucas uz objektubet gan kontekstam, kurā šis objekts tika definēts. Tas lauž ikviena, kas lasa kodu un vēlas to izmantot, cerības. šis.īpašums metodes ietvaros.
Ieteicamais veids, kā rakstīt metodes, kas ir atkarīgas no šī Runa ir par klasiskās sintakses izmantošanas turpināšanu literālos objektos vai šo metožu deklarēšanu standarta veidā klasēs, rezervējot bultiņu funkcijas iekšējiem izsaukumiem, kuriem jāaptver šī no pārākas metodes.
Neizmantojiet bultiņu funkcijas kā konstruktorus
Bultiņu funkciju trūkums [[Konstruēt]], iekšējais mehānisms, kas ļauj izsaukt funkciju ar jaunsTāpēc, mēģinot tos izmantot kā konstruktorus, tiks ģenerēts Tipa kļūdaViņiem arī nav savu. prototipsTāpēc nevar apturēt koplietotās metodes instancēm.
Ja jūsu dizainam ir nepieciešami atkārtoti izmantojami gadījumi ar kopīgām īpašībām un metodēm, jums vajadzētu izvēlēties nodarbības vai ar tradicionālajām konstruktora funkcijām, atstājot bultiņu funkcijas bezvalstnieku loģikai vai tīri funkcionālām utilītprogrammām.
Saistība ar citām modernajām JavaScript funkcijām
Bultu funkcijas reti tiek izmantotas atsevišķi; tās gandrīz vienmēr iet roku rokā ar citām funkcijām Moderns ECMAScript kas ietekmē arī to, kā jūs organizējat un saprotat kodu. Daži no vissaistītākajiem ir ļaut y constuz nemainīgums, iznīcināšana un izplatīt sintakse.
Zinot, kā tos pareizi apvienot, jūs varat rakstīt ļoti kodolīgas bultiņu funkcijas, kas pārveido datus ar masīvu metodēm, piemēram, karte, filtrēt y samazinātvienmēr saglabājot sākotnējo stāvokli neskartu, kas ir ļoti svarīgi tādās vidēs kā React, kur nemainīguma modelis ir norma.
ļaujiet, konstante un nemaināmība
Ierašanās ļaut y const Tas ļāva strādāt ar bloku tvērumiem un atsaucēm, kas netiek atkārtoti piešķirtas. Apvienojumā ar bultiņu funkcijām mūsdienās ir ierasta prakse deklarēt funkcijas kā const manaFunkcija = () => {…}, nodrošinot, ka mainīgais, kas satur funkciju, netiks pārrakstīts.
Datu struktūrās, piemēram, masīvos un objektos, nemainīgums tiek veicināts, izmantojot Objekta iesaldēšana kad vēlaties izvairīties no dziļām izmaiņām, kā arī izmantojot izkliedētās darbības un tīras metodes, kad jums ir jāizveido modificētas kopijas Tā vietā, lai mainītu oriģinālu, kaut kas īpaši svarīgs renderēšanas vai stāvokļa gadījumā ir atkarīgs no izmaiņu noteikšanas.
Veidņu literāļi, ternāriji un īsslēgums
Atzvanīšanas funkciju renderēšanā, piemēram, JSX valodā vai HTML virkņu veidošanā, bultiņu funkciju jaukšana ar veidņu literāļi (atpakaļejošās atzīmes) un operatori, piemēram, trīskāršs o la īsslēguma novērtējumsŠie operatori ļauj rakstīt ļoti izteiksmīgus iekļautus nosacījumus, kas ļoti labi atbilst bultiņu funkciju deklaratīvajam stilam.
Veidņu literāļu ietvaros izteiksmes ${…} Tie tiek atrisināti ar to pašu leksisko darbības jomu, kas dominē bultiņu funkciju `this`, tāpēc ir svarīgi skaidri noteikt, kuri mainīgie un kāds konteksts tiek izmantoti katrā interpolācijā, lai izvairītos no neskaidras uzvedības.
Bultu funkcijas iterācijās un kolekcijās
Viena no jomām, kur bultiņu funkcijas ir devušas vislielāko labumu, ir apstrāde masīvi un kolekcijasĪsu atzvanīšanas metožu, piemēram, karte, filtrēt, atrast o samazināt Ar bultiņas sintaksi tas kļūst ievērojami lasāmāks.
Piemēram, ierakstu filtrēšana sarakstā, pamatojoties uz kategoriju, vai API rezultātu pārveidošana iekšējās datu struktūrās kļūst daudz deklaratīvāka, un apvienojumā ar iznīcināšana No funkcijas parametriem ir viegli iegūt tikai nepieciešamās īpašības.
kartēt, filtrēt, samazināt un uzņēmums
Tipiska kombinācija parasti ir kaut kas līdzīgs šim: list.filter(item => condition).map(item => transformation)Vairāku bultiņu funkciju apvienošana masīva metodēs. Katra no tām manto `this` no konteksta, kurā tā ir definēta, lai gan vairumā šo gadījumu `this` pat netiek izmantots, bet gan tiek izmantoti skaidri parametri, kas pastiprina funkcionālo stilu.
En samazinātŠajā gadījumā, ja pārvaldāt akumulatoru, kas pāriet no vienas iterācijas uz otru, bultiņu funkcijas ļauj ļoti kodolīgi izteikt redukcijas operāciju, lai gan ieteicams nelietot pārāk blīvas izteiksmes, ja vēlaties, lai kods paliktu saprotams citiem izstrādātājiem.
Imports, eksports un moduļi
Mūsdienu JavaScript ekosistēmā gandrīz viss kods ir organizēts moduļivai nu izmantojot vietējo sintaksi importa eksporta vai izmantojot komplektēšanas sistēmas, kas kompilējas šajā formātā. Šajā kontekstā bultiņu funkcijas ļoti labi iederas kā atkārtoti izmantojamas funkcionalitātes vienības.
Ir ierasts redzēt komunālos pakalpojumus, kas tiek eksportēti kā const myUtil = (…) => {…} un pēc tam importēti dažādos failos. Tā kā katrs modulis atrodas savā darbības jomā, šī leksikona Bultu funkciju konteksts parasti ir moduļa konteksts, kas vairumā tīro utilītu pat nav būtisks, jo tām konteksts nav nepieciešams.
Labākā prakse ar ārējiem moduļiem un skriptiem
Pasniedzot JavaScript HTML lapā, ieteicams to ielādēt, izmantojot ārējie faili un izvairieties iegult lielus iekļautos blokus. Izmantojiet arī atribūtu tips = "modulis" skripta tagā iespējo mūsdienīgu sintaksi importa eksporta un skaidri norāda, ka fails tiek izpildīts režīmā stingra pēc noklusējuma
Runājot par veiktspēju, moduļu skriptu ievietošana vadītājs ar atlikt ļauj pārlūkprogrammai lejupielādēt un izpildīt kodu bez renderēšanas bloķēšanas HTML, vienlaikus saglabājot labu lietotāja pieredzi. Visā šajā shēmā bultiņu funkcijas ir vienkārši dabiskākais veids, kā definēt mazus atkārtoti izmantojamas loģikas fragmentus.
DOM ievietošana un manipulēšana ar modernu JavaScript
Lai gan šīs tēmas uzmanības centrā ir bultiņa un `this` funkcijas, nav iespējams ignorēt JavaScript lomu DOM manipulācijaMetodes, piemēram, getElementById, querySelector, setAttribute vai modifikācija stils Tie joprojām ir pamata funkcionalitāte, taču mūsdienās tos parasti apvieno ar bultiņu atzvanīšanas funkcijām, lai reaģētu uz notikumiem un atjauninātu saskarni.
Strādā ar notikumu klausītāji izmantojot element.addEventListener('click', e => {...}) Šis ir standarta veids, kā saistīt loģiku ar lietotāja mijiedarbību. Šajos apstrādātājos šī Funkcijas “bultiņa” iekšpusē tas nebūs DOM elements, bet gan ārējais konteksts, tāpēc, ja jums ir nepieciešams mezgls, jums būs jāizmanto pats note parametrs. e.currentTarget o e.mērķis, nevis paļaujoties uz to, kā tas bija ar vecajiem iekļautajiem atribūtiem.
Sinhronais JavaScript, asinhronais JavaScript un atzvanīšanas funkcijas
Vēl viena būtiska joma, kurā bultiņu funkcijas ietekmē situāciju, ir asinhronā programmēšanaJavaScript ir vienpavediena, un, lai izvairītos no saskarnes bloķēšanas, tas deleģē lēnas darbības pārlūkprogrammai vai mezglu API, kas pēc tam izsauc jūsu atzvanīšanas pieprasījumus, kad tie ir pabeigti.
Nodot bultiņas funkcijas kā atzvanīšanas funkcijas setTimeout, solaHTTP pieprasījumi vai diska piekļuves padara kodu kompaktāku un saglabā kontekstu bez papildu trikiem. Ligzdoto atzvanīšanas darbību solī virzienā uz sola un vēlāk virzienā uz async/waitBultu funkcijas ir bijušas būtisks elements, lai datu plūsma būtu lasāma.
Kopumā izpratne par to, kā bultiņu funkcijas to leksiski uztverZinot, kad tās ir jūsu labākie sabiedrotie un kad vislabāk ir turpināt paļauties uz tradicionālajām funkcijām, kā arī zinot, kā tās apvienot ar moduļiem, masīvu metodēm, nemaināmību, klasēm un notikumu ciklu, ir tas, kas ļauj jums rakstīt patiesi stabilu JavaScript un React; galu galā runa ir par pareizās funkcijas formas izvēli katram kontekstam, izmantojot tās sintaktiskās priekšrocības, neiekrītot robežgadījumos, kur tās "šāda" uzvedība varētu radīt pretēju efektu. Kopīgojiet šo programmēšanas rokasgrāmatu un JavaScript bultiņu funkcijas.