Стрелочные функции, введенные в ES6, стали важным инструментом для более краткого и чистого написания выражений в JavaScript. Они особенно полезны в ситуациях, где нужно использовать анонимные функции, такие как функции обратного вызова и промежуточные функции map, reduce, filter.
Допустим, у нас есть массив чисел и мы хотим получить новый массив, состоящий из квадратов этих чисел. Вместо традиционного использования функции map и анонимной функции в ES5:
var numbers = [1, 2, 3, 4, 5];
var squares = numbers.map(function(num) {
return num * num;
});
Мы можем использовать стрелочную функцию ES6 для упрощения выражения:
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(num => num * num);
Как видите, синтаксис стрелочных функций упрощает и сокращает код.
Одним из уникальных свойств стрелочных функций ES6 является то, что они не связывают собственные this, arguments, super или new.target. Это делает их отличным выбором для функций, где важно сохранить контекст this.
Вернемся к нашему примеру и добавим this в нашу функцию map в ES5:
function SquareCalculator(numbers) {
this.numbers = numbers;
this.getSquares = function() {
return this.numbers.map(function(num) { // this указывает на Window, а не на SquareCalculator
return num * num;
});
}
}
В этом сценарии, this внутри функции map не указывает на SquareCalculator, а указывает на глобальный объект Window.
С помощью стрелочных функций ES6, мы можем легко обойти эту проблему:
function SquareCalculator(numbers) {
this.numbers = numbers;
this.getSquares = function() {
return this.numbers.map(num => num * num); // this указывает на SquareCalculator, как мы и хотели
}
}
Таким образом, стрелочные функции ES6 не только вносят сокращения в код, но и упрощают взаимодействие с контекстом this, что делает их мощным инструментом в арсенале каждого разработчика JavaScript.