Функция стрелки 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 Arrow Function, чтобы узнать больше.

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