Функція стрілки JavaScript

У цьому посібнику ви дізнаєтеся про функцію стрілки JavaScript за допомогою прикладів.

Функція стрілки - одна з функцій, представлена ​​у версії JavaScript ES6. Це дозволяє створювати функції більш чистим способом порівняно зі звичайними функціями. Наприклад,
Ця функція

 // 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, щоб дізнатися більше.

Цікаві статті...