Стрелочные функции, введенные в 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.