Почему в качестве обработчиков событий класса нежелательно использовать стрелочные функции?

В ES6, кажется, добавили возможность добавлять в качестве методов\полей класса "стрелочные" функции.
Без стрелочных функций почти все обработчики приходится привязывать к классу через handler.bind(this) или вкладывать ссылку на класс в качестве поля event (event.that = this).

"Стрелочные" функции берут this из того окружения, в котором они созданы. И, по идее, их можно использовать в качестве обработчиков.

Какие плюсы и минусы использования "стрелочных функций" в качестве обработчиков событий для классов? Есть ли вменяемая альтернатива .bind(this)?
  • Вопрос задан
  • 601 просмотр
Решения вопроса 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
В этой статье (на англ.) называют такие минусы:
  1. стрелочные не попадают в прототип. Поэтому не получится с наследованием вызвать super.method()
  2. тормоза. Тесты показывают, что со стрелочными код работает много медленнее, чем с традиционными function, пусть и после .bind()
Ответ написан
@vabka
Токсичный
Цитата с того ответа на SO, который вы дали:
First the memory and performance; When you use a class field to define a function, your whole method resides on each instance of the class and NOT on the prototype, but using the bind technic, just a small callback is stored on each instance, which calls your method that is stored on the prototype.

Second thing that can be affected is how you write your unit tests. You won't be able to use the component prototype to stub on function calls like below:

1. Если используешь стрелочную функцию, то у тебя для каждого экземпляра компонента будет создаваться новый экземпляр функции. Если использовать bind - функция будет только одна, в прототипе.
2. Что-то про тесты, но с этим я лично не сталкивался.

Чтобы сохранять читабельность - можно использовать плагин для бабеля:
@babel/plugin-transform-arrow-functions
или что-то типа autobind-decorator
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
В ES6, кажется, добавили возможность добавлять в качестве методов\полей класса "стрелочные" функции.

Именно кажется, функцию-стрелку нельзя использовать как конструктор, их нельзя вызывать с new

"Стрелочные" функции берут this из того окружения, в котором они созданы.

Нет, "Стрелочные" функции берут this из того окружения, в котором они ВЫЗВАНЫ.

И, по идее, их можно использовать в качестве обработчиков.

Без "по идее". Их хорошо использовать в качестве обработчиков событий.

Какие плюсы и минусы использования "стрелочных функций" в качестве обработчиков событий для классов?

Вы пробовали выполнять код, в котором есть класс с функцией-стрелкой, как метод? Скорее всего нет.
Вы немного неясно представляете себе, что происходит с классом, функцией, обработчиком события и this.

Есть ли вменяемая альтернатива .bind(this)?

И .bind(this) и поведение по-умолчанию - это мощные инструменты, для которых не надо искать "вменяемых альтернатив", а использовать по назначению.

Ссылки:
Стрелочные функции основы (ru)
Стрелочные функции (ru)
Классы в JavaScript (ru)
Про this (ru)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы