Функция за стрелка на JavaScript

В този урок ще научите за функцията за стрелка на JavaScript с помощта на примери.

Функцията стрелка е една от функциите, въведени в ES6 версията на JavaScript. Тя ви позволява да създавате функции по-изчистен начин в сравнение с обикновените функции. Например,
Тази функция

 // 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отнася до глобалния обект (обект Window в браузъра). Следователно, 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

Забележка : Функциите със стрелки са въведени в ES6 . Някои браузъри може да не поддържат използването на функции със стрелки. Посетете поддръжката на функцията за стрелка на JavaScript, за да научите повече.

Интересни статии...