Näiden kahden välillä on muita eroja syntaksin lisäksi.
Kuten melkein kaikki modernit ohjelmointikielet, JavaScript tarjoaa tapoja luoda toimintoja, jotka mahdollistavat koodin uudelleenkäytön. Niille, jotka eivät tunne kieltä, on kaksi eri tapaa ilmoittaa funktio JavaScriptissä.
Alunperin, toiminto avainsanaa käytettiin, ja myöhemmin luotiin nuolen syntaksi. Vaikka toimintoavainsana ja nuolen syntaksi eroavat toisistaan, ne luovat samanlaisia tuloksia.
Kyvyttömyys erottaa näitä kahta toisistaan voi aiheuttaa ongelmia ja johtaa virheelliseen käyttöön. Nykyaikaisen JS-kehittäjän on välttämätöntä ymmärtää, kuinka jokainen funktion määrittely vaikuttaa laajuuteen ja näkyvyyteen.
Mitä ovat JavaScriptin nuolitoiminnot?
JavaScriptin nuoli toimii ovat vaihtoehtoinen tapa määrittää toimintoja, jotka eivät käytä oletusarvoa toiminto avainsana:
toimintolokiviesti(viesti) {
konsoli.log (viesti);
}konst logMessage = (viesti) => {
konsoli.log (viesti);
}
konst logMessage = viesti =>konsoli.log (viesti);
Yllä näet saman viestin kirjoitettuna kolmella eri tavalla. Ensimmäinen käyttää tavallista funktion määritysmenetelmää. Seuraavat kaksi osoittavat kaksi tapaa käyttää ES6:n nuolitoimintoja.
JavaScript otti ensimmäisen kerran käyttöön nuolifunktion syntaksin ECMAScript 2015 -standardien julkaisun myötä. Nuolifunktiot tarjosivat selkeän ja tiiviin tavan luoda nopeasti toimintoja ja mielenkiintoisen ratkaisun useisiin pitkään jatkuneisiin JavaScriptin laajuusongelmiin.
Nämä ominaisuudet tekivät nuolitoiminnoista nopeasti hitin monien kehittäjien keskuudessa. Ohjelmoijat, jotka etsivät modernia JavaScript-koodikantaa, löytävät yhtä todennäköisesti nuolifunktioita kuin tavallisia toimintoja.
Miten nuolifunktiot eroavat JavaScriptin tavallisista funktioista?
Ensi silmäyksellä nuolifunktiot eivät näytä poikkeavan paljoa funktion avainsanalla määritetyistä funktioista. Syntaksin ulkopuolella molemmat kapseloivat uudelleen käytettävän joukon toimintoja, joita voidaan kutsua muualta koodissa.
Huolimatta yhtäläisyyksistä näiden kahden välillä on kuitenkin joitain eroja, jotka kehittäjien on oltava tietoisia.
Ero laajuudessa
Aina kun tavallinen funktio on ilmoitettu JavaScriptissä, se toiminto toimii suljina, joka luo oman laajuutensa. Tämä voi aiheuttaa ongelmia käytettäessä tiettyjä erikoistoimintoja, kuten setTimeout ja setInterval.
Ennen ES6:ta oli olemassa huomattava määrä kiertotapoja, jotka nostivat kohteita korkeammalle tasolle takaisinsoittojen käyttöä varten. Nämä hakkerit toimivat, mutta niitä oli usein vaikea ymmärtää, ja ne saattoivat aiheuttaa ongelmia tiettyjen muuttujien päällekirjoittamisessa.
Nuolitoiminnot ratkaisivat molemmat ongelmat yksinkertaisella ja tyylikkäällä tavalla. Kun nuolifunktiota käytetään osana takaisinsoittoa, sillä on pääsy samaan soveltamisalaan kuin funktiolla, josta se kutsuttiin.
Tämä mahdollisti funktioiden käytön takaisinkutsuina menettämättä pääsyä kontekstiin, jossa alkuperäinen tapahtuma kutsuttiin. Yksinkertaisena testinä tämän periaatteen näyttämiseksi toiminnassa voit määrittää viivästetyn viestitoiminnon, kuten alla:
toimintoviivästynyt viesti(viesti, viive) {
setTimeout(toiminto(viesti) {
konsoli.log (viesti);
}, viive);}
viivästetty viesti("Hei maailma", 1000);
Toiminto on yksinkertainen, hyväksyvä viesti ja viive millisekunneissa. Kun viive on kulunut, sen pitäisi kirjata viesti konsoliin. Kuitenkin, kun koodi suoritetaan, määrittelemätön kirjataan konsoliin välitetyn viestin sijaan.
Kun takaisinsoittotoiminto suoritetaan, laajuus muuttuu eikä alkuperäinen viesti ole enää käytettävissä. Viestin käyttäminen sulkemisen sisältä edellyttää, että sanoma nostetaan globaaliin muuttujaan, mikä voi johtaa sen päällekirjoittamiseen ennen takaisinsoittoa.
Nuolitoiminto on oikea ratkaisu tähän ongelmaan. Jos korvaat ensimmäisen argumentin for setTimeout, laajuus voidaan säilyttää, ja funktiolla on pääsy viestiin, jolle välitetään viivästynyt viesti.
toimintoviivästynyt viesti(viesti, viive) {
setTimeout(() => {
konsoli.log (viesti);
}, viive);}
viivästetty viesti("Hei maailma", 1000);
Nyt, kun se toteutetaan, viivästynyt viesti toiminto kirjaa viestin. Lisäksi tämä mahdollistaa useiden viestien asettamisen jonoon eri viiveillä, ja ne kaikki tulevat silti oikeaan aikaan.
Tämä johtuu siitä, että joka kerta viivästynyt viesti käytetään, se luo oman laajuutensa omalla kopiollaan sisäisestä nuolitoiminnosta.
Koodin luettavuus
Vaikka nuolifunktiot ovat hyödyllisiä takaisinkutsuina, niitä käytetään myös koodin pitämiseen puhtaana ja ytimekkäänä. Yllä olevassa osiossa voit nähdä, että nuolitoiminnon käyttäminen tekee selväksi, mitä tapahtuu, kun viivästynyt viesti toimintoa kutsutaan.
Kun toiminnoista tulee monimutkaisempia, pieni selkeys voi tehdä koodista paljon luettavamman. Kun kirjoitat objekteja, tämä voi tehdä koodista yksinkertaisempaa, kun lisäät lyhyitä toimintoja:
luokkaalaskuri{
_count = 0;
lisäys = () => {
Tämä._count += 1;
}
vähennys = () => {
Tämä._count -= 1;
}
laske = () => {
palataTämä._Kreivi;
}
}
antaa ct = Uusi laskuri();
Rooli olioohjelmoinnissa
Vaikka JavaScriptin nuolitoiminnot ovat olennainen osa toiminnallista ohjelmointia, niillä on myös paikkansa olio-ohjelmointi. Nuolifunktioita voidaan käyttää luokkailmoituksissa:
luokkaatilausLineItem{
_LineItemID = 0;
_Tuote = {};
_määrä = 1;rakentaja(tuote) {
Tämä._LineItemID = krypto.randomUUID();
Tämä._Tuote = tuote
}
changeLineItemQuantity = (uusi määrä) => {
Tämä._Qty = uusi määrä;
}
}
Nuolifunktion käyttäminen menetelmien ilmoittamiseen luokkailmoituksessa ei muuta funktion käyttäytymistä luokassa. Luokan ulkopuolella se kuitenkin paljastaa funktion, jolloin muut luokat voivat käyttää sitä.
Säännöllisiin funktioihin ei pääse luokkamäärityksen ulkopuolella ilman kutsua. Tämä tarkoittaa, että vaikka muut luokkailmoitukset voivat periä nämä funktiot, niitä ei voida käyttää suoraan muiden luokkien muodostamiseksi.
Milloin sinun tulisi käyttää JavaScriptin nuolitoimintoja?
JavaScriptin nuolitoiminnot ovat uskomattoman tehokas ominaisuus, joka antaa kehittäjille paljon paremman hallinnan sen suhteen, mihin funktiolla on pääsy. Sen tietäminen, milloin takaisinsoitolla pitäisi olla pääsy ylätason soveltamisalaan ja milloin ei, voi auttaa kehittäjää määrittämään, minkä tyyppistä ilmoitusta hän käyttää.
Nuolifunktiot antavat ohjelmoijille selkeän ja ytimekän tavan kirjoittaa takaisinsoittoja paljastamatta osia, jotka pitäisi piilottaa. Ne mahdollistavat myös puhtaiden ja yksinkertaisten kokoonpanojen luomisen, mikä mahdollistaa toiminnallisen ohjelmoinnin JavaScriptissä.
JS-kehittäjien on oltava tietoisia näiden kahden syntaksin välisistä eroista ja otettava huomioon, mikä syntaksi on sopiva, kun ne ilmoittavat funktionsa.