Разница между обычными функциями и стрелочными функциями
В JavaScript есть два способа определения функций: обычные функции и стрелочные функции. Основное различие между ними заключается в том, как они обрабатывают ключевое слово this
и в их синтаксисе. В этом ответе мы подробнее рассмотрим их обоих на примерах.
Обычные функции. Обычные функции в JavaScript определяются с помощью ключевого слова function
. Они могут быть определены как объявления функций или функциональные выражения.
Вот пример объявления функции:
function sayHello(name) { console.log(`Hello ${name}!`); }
А вот пример функционального выражения:
const sayHello = function(name) { console.log(`Hello ${name}!`); }
Обычные функции имеют собственную привязку this
. Когда вызывается обычная функция, this
относится к объекту, вызвавшему функцию. Например:
const person = { name: 'John', sayHello: function() { console.log(`Hello, my name is ${this.name}`); } } person.sayHello(); // output: "Hello, my name is John"
Стрелочные функции. Стрелочные функции были представлены в ECMAScript 6 как более лаконичный способ определения функций. Они используют синтаксис =>
и не имеют собственной привязки this
. Вместо этого они используют значение this
окружающего лексического контекста.
Вот пример стрелочной функции:
const sayHello = (name) => { console.log(`Hello ${name}!`); }
Если стрелочная функция определена внутри объекта или класса, она унаследует значение this
объекта или класса. Например:
const person = { name: 'John', sayHello: function() { const greet = () => { console.log(`Hello, my name is ${this.name}`); } greet(); } } person.sayHello(); // output: "Hello, my name is John"
Использование стрелочных функций может сделать код более кратким и удобным для чтения, особенно при работе с массивами и функциями более высокого порядка.
const numbers = [1, 2, 3, 4, 5]; // using a regular function const doubled = numbers.map(function(num) { return num * 2; }); // using an arrow function const tripled = numbers.map(num => num * 3); console.log(doubled); // output: [2, 4, 6, 8, 10] console.log(tripled); // output: [3, 6, 9, 12, 15]
Таким образом, основные различия между обычными функциями и стрелочными функциями заключаются в следующем:
- Обычные функции имеют собственную привязку
this
, тогда как стрелочные функции используют значениеthis
окружающего лексического контекста. - Стрелочные функции имеют более лаконичный синтаксис, что упрощает чтение и запись кода.