Функције са стрелицама су чистије и једноставније од њихове дуготрајне обичне алтернативе, али не бисте требали журити да их користите без знања како функционишу.

Синтакса функције стрелице стигла је са издањем ЕЦМАСцрипт 2015, такође познатог као ЕС6. Данас су функције стрелица постале омиљена карактеристика многих ЈаваСцрипт програмера. Ова љубав према функцијама са стрелицама је последица сажете синтаксе и једноставног понашања кључне речи "ова".

Али функције стрелица имају неке недостатке. Сазнајте о кључним разликама између функција са стрелицама и редовних функција и сазнајте зашто је у већини случајева боље да се држите редовних функција.

1. Морате дефинисати функцију стрелице пре него што је користите

Не можете подићи функцију стрелице. ЈаваСцрипт-ова подразумевана правила подизања омогућавају вам да позовете функцију пре него што је дефинишете, али то није случај са функцијама са стрелицама. Ако имате ЈаваСцрипт датотеку са функцијама, то би значило да ће сав важан код бити на дну датотеке.

instagram viewer

На пример, размотрите следећи ЈаваСцрипт код:

конст доублеНумберс = (бројеви) { 
 бројеви.мапа(н => н * 2)
}
конст халвеНумберс = (бројеви) { 
 бројеви.мапа(н => н / 2)
}


конст сумНумберс = (бројеви) { 
 бројеви.редуце((збир, н) => { 
повратак сума + н; 
 }, 0)
}
конст бројеви = [1, 20, 300, 700, 1500]
конст удвојено = двоструки бројеви (бројеви)
конзола.лог (халвеНумберс (удвостручено))
конзола.лог (сумНумберс (бројеви))

У горњем блоку кода, важан код је доле на дну. Све помоћне функције су дефинисане пре тачке извршења. Морати да креирајте своје ЈаваСцрипт функције на врху датотеке може бити незгодно јер ћете морати да скролујете надоле да бисте видели прави код који ради.

Ако сте помоћне функције преместили на дно, а стварни код на врх, добићете референтну грешку. Време извођења третира функцију као променљиву. Дакле, морате га прво дефинисати пре него што му приступите или позовете. Али ако сте претворили све функције са стрелицама у обичне функције (са функција кључну реч), онда би ваш код добро функционисао. У исто време, важан код остаје на врху где га можете лоцирати.

Ово је један од највећих проблема са коришћењем функција стрелица. Не показују понашање хостинга. Другим речима, морате их дефинисати пре стварног места на коме ћете их користити. С друге стране, можете подићи редовне функције.

2. Функције стрелице могу бити збуњујуће за неке људе

Још један разлог за коришћење редовних функција уместо функција са стрелицама је читљивост. Редовне функције се лакше читају јер експлицитно користе функција кључна реч. Ова кључна реч идентификује да је код у питању функција.

С друге стране, ви додељујете функције стрелице променљивим. Као почетника, ово би вас могло збунити да мислите да је код променљива, а не функција.

Упоредите две функције испод:

конст халвеНумберс = (бројевима) => {
повратак бројеви.мапа(н => н / 2)
}
функцијахалвеНумберс(бројевима) { 
повратак бројеви.мапа(н => н / 2)
}

На први поглед, лако можете рећи да је други део кода функција. Синтакса јасно показује да је код функција. Међутим, прва је двосмислена — можда нећете лако рећи да ли је променљива или функција.

3. Не можете користити функције стрелице као методе

Када користите функцију стрелице, ово кључна реч одговара ономе што је изван ствари у којој се налазимо. У већини случајева, то је објекат прозора.

Размотрите следећи објекат:

конст особа = {
 име: "Киле",
 презиме: "кувар",
 принтНаме: () => {
конзола.Пријава(`${ово.име}``${ово.презиме}` )
 }
}
персон.принтНаме()

Ако покренете код, приметићете да прегледач штампа недефинисан и за име и за презиме. Пошто користимо функцију стрелице, ово кључна реч одговара објекту прозора. Такође, нема име или презиме тамо дефинисана имовина.

Да бисте решили овај проблем, уместо тога морате да користите редовну функцију:

конст особа = {
 име: "Киле",
 презиме: "кувар",
 принтНаме: функција() {
конзола.Пријава(`${ово.име}``${ово.презиме}` )
 }
}
персон.принтНаме()

Ово ће добро функционисати јер ово односи се на особа објекат. Ако ћете често радити ову врсту објектно оријентисаног програмирања, онда ћете морати да се уверите да користите редовне функције. Функције са стрелицама неће радити.

Када користити функције стрелице

Користите функције стрелице углавном на местима где вам је потребна анонимна функција. Пример таквог сценарија је рад са функцијом повратног позива. Боље је користити функцију стрелице када пишете повратни позив јер је синтакса много једноставнија од писања пуне функције.

Упоредите ова два и одлучите шта је једноставније:

функцијахалвеНумберс(бројевима) {
повратак бројеви.мапа(н => н / 2)
}
функцијахалвеНумберс(бројевима) {
повратак бројеви.мапа(функција(н) {
повратак н / 2
 })
}

Оба случаја прослеђују функцију повратног позива методу мап(). Али први повратни позив је функција стрелице, док је други пуна функција. Можете видети како прва функција заузима мање редова кода од друге функције: три наспрам. пет.

Други пут да користите функције стрелице је кад год желите да се бавите одређеном "овом" синтаксом. Објекат „овај“ ће се променити у зависности од тога да ли користите обичне функције или функције стрелице за одређене ствари.

Следећи блок кода региструје два слушаоца догађаја „клик“ на објекту документа. Прва инстанца користи регуларну функцију као повратни позив, док друга користи функцију стрелице. Унутар оба повратна позива, код евидентира извршни објекат (ово) и циљ догађаја:

документ.аддЕвентЛистенер("кликни", функција(е) {
конзола.Пријава("ФУНКЦИЈА", ово, е.таргет)
})
документ.аддЕвентЛистенер("кликни", (е) => {
конзола.Пријава("СТРЕЛАЦ", ово, е.таргет)
})

Ако бисте покренули ову скрипту, приметићете да се „ова“ референца разликује за обе. За редовну функцију, ово својство упућује на документ, који је исти као и е.таргет имовина. Али за функцију стрелице, ово упућује на објекат прозора.

Када користите редовну функцију као повратни позив, то ће се односити на елемент где покрећемо догађај. Али када користите функцију стрелице, ова кључна реч подразумевано подразумева објекат прозора.

Сазнајте више о функцијама стрелице у односу на регуларне функције

Постоји неколико других суптилних разлика између регуларних функција и функција стрелица. Савладавање обе врсте функција је основа за стицање савладавања ЈаваСцрипт-а. Научите када да користите један, а када други; тада ћете разумети импликације коришћења било регуларне функције или функције стрелице у вашем ЈаваСцрипт-у.