Самое основное преимущество стрелочных функций над обычными - это
область видимости окружающего контейнера.
Для примера набросал самый простой скрипт:
var Obj = {
data: 'Тест 1',
getOne: function() {
return () => {
alert(this.data+', '+[...arguments].join(', '));
}
},
getTwo: function() {
return function() {
alert(this.data+', '+[...arguments].join(', '));
}
}
};
/** вернет "Тест 1, Тест 2, Тест 3, Тест 4",
* т.к. у стрелочной ф-ии есть полный доступ к внешнему окружению **/
Obj.getOne('Тест 2', 'Тест 3', 'Тест 4')();
/** вернет "undefined" для this.data,
* а на конструкцию [...arguments] вообще ругнется,
* т.к. в ним нет никакого доступа **/
Obj.getTwo('Тест 2', 'Тест 3', 'Тест 4')();
В моем примере стрелочная ф-я в THIS вернет объект Obj (контейнер окружения стрелочной ф-ии), а в обычной ф-ии THIS вернет объект самой функции.
В Vue.js вообще крайне рекомендовано использовать стрелочные ф-ии, чтобы получить доступ к this, через который происходит обращение к переменным и пользовательским функциям окружения.
Изменил: Дмитрий (13.08.2020 / 01:21)