Функција ЈаваСцрипт стрелице

У овом упутству ћете научити о функцији стрелице ЈаваСцрипт помоћу примера.

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

 // function expression let x = function(x, y) ( return x * y; )

може се записати као

 // using arrow functions let x = (x, y) => x * y;

помоћу функције стрелице.

Синтакса функције стрелице

Синтакса функције стрелице је:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Ево,

  • myFunction је назив функције
  • arg1, arg2,… argN су аргументи функције
  • statement(s) је тело функције

Ако тело има једну изјаву или израз, можете написати функцију стрелице као:

 let myFunction = (arg1, arg2,… argN) => expression

Пример 1: Функција стрелице без аргумента

Ако функција не узима ниједан аргумент, требало би да користите празне заграде. На пример,

 let greet = () => console.log('Hello'); greet(); // Hello

Пример 2: Функција стрелице са једним аргументом

Ако функција има само један аргумент, можете изоставити заграде. На пример,

 let greet = x => console.log(x); greet('Hello'); // Hello

Пример 3: Функција стрелице као израз

Такође можете динамички креирати функцију и користити је као израз. На пример,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Пример 4: Функције вишередних стрелица

Ако тело функције има више изјава, морате их ставити у коврџаве заграде (). На пример,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

ово са функцијом стрелице

Унутар регуларне функције, ова кључна реч односи се на функцију где се зове.

Међутим, thisније повезано са функцијама стрелице. Функција стрелице нема своју this. Дакле, кад год позовете this, односи се на родитељски опсег. На пример,

Унутар редовне функције

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Оутпут

 25 недефинисаних прозора ()

Овде је this.ageунутра this.sayName()могуће приступити јер this.sayName()је то метода објекта.

Међутим, innerFunc()то је нормална функција и this.ageније јој доступно јер thisсе односи на глобални објекат (објект Виндов у прегледачу). Дакле, this.ageунутар innerFunc()функције даје undefined.

Унутар функције стрелице

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Оутпут

 25 25

Овде се innerFunc()функција дефинише помоћу функције стрелице. А унутар функције стрелице, thisодноси се на опсег родитеља. Отуда this.ageдаје 25 .

Обавезивање аргумената

Регуларне функције имају обавезујуће аргументе. Зато када аргументе прослеђујете редовној функцији, можете им приступити помоћу argumentsкључне речи. На пример,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

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

Када покушате да приступите аргументу помоћу функције стрелице, то ће дати грешку. На пример,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Да бисте решили овај проблем, можете користити синтаксу ширења. На пример,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Функција стрелице са обећањима и повратним позивима

Функције стрелица пружају бољу синтаксу за писање обећања и повратних позива. На пример,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

може се записати као

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

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

1. Не бисте требали користити функције стрелица за креирање метода унутар објеката.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Не можете користити функцију стрелице као конструктор . На пример,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Напомена : Функције стрелица уведене су у ЕС6 . Неки прегледачи можда не подржавају употребу функција стрелица. Посетите подршку за ЈаваСцрипт функцију стрелице да бисте сазнали више.

Занимљиви Чланци...