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

Question

[Максим]

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

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

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

Comments

[Василий Банников]

нежелательно использовать 'стрелочные' функции

Впервые о таком слышу. Интересно узнать.
Вероятно, это связано с одним из двух:
1. Вероятно там, где как раз нужно поведение, когда контекст не захвачен
2. Там, где есть риск, что вы будете в цикле создавать кучу стрелочных функций.

[Максим]

Василий Банников, не могу точно сказать, возможно, что я не совсем точно интерпретировал случай на stackoverflow. Вот этот: https://stackoverflow.com/questions/50375440/bindi...

[Василий Банников]

Максим, Да, как раз причина в эффективности.
На одной из прошлых работ мы это обходили добавлением небольшой строчки в базовый компонент, который все методы в классе биндил на текущий экземпляр. (как раз самописный auto-bind)
Сейчас вот на SO предлагают использовать бабель

Answer 1

[Сергей Соколов]

В этой статье (на англ.) называют такие минусы:

1. стрелочные не попадают в прототип. Поэтому не получится с наследованием вызвать super.method()
   
2. тормоза. Тесты показывают, что со стрелочными код работает много медленнее, чем с традиционными function, пусть и после .bind()
   

Answer 2

[Василий Банников]

Цитата с того ответа на 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

Comments

[Сергей Соколов]

не совсем очевиден момент с bind() – он ведь создаёт копию функции.

[Василий Банников]

Сергей Соколов, Нет, он только оборачивает её.

[Сергей Соколов]

Василий Банников, MDN пишет прямо, что создаёт новую функцию:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Return value

A copy of the given function with the specified this value, and initial arguments (if provided).