Почему babel так делает?

Question

[Алексей Ярков]

Подключил babel к проекту для сборки gulp-ом. Для теста переписал один файл на ES6 и вот что я вижу:

// До сборки
$(".navbar-toggle").on("click", () => {
	$(this).toggleClass("active");
})

// После сборки
$(".navbar-toggle").on("click", function() {
	$(void 0).toggleClass("active");
})

Что это за void 0? Естественно клик по кнопке не отрабатывает.

Answer 1

[Павел]

Данный код ни до сборки, ни после не будет работать, по причине того, что контекст this -- это не dom-элемент, а родитель данной конструкции (скорее всего - объект window). UPD. babel посчитал, что родительский объект (на который ссылается this) не определен (т.е. undefined) и сократил это выражение до void 0, дающее тот же эффект. Таким же образом минификаторы превращают false в !!0

Чтобы ваш код заработал, нужно обратиться к объекту события:

$(".navbar-toggle").on("click", event => {
  $(event.currentTarget).toggleClass("active");
})

Но зачем использовать стрелочные функции там, где они не нужны?

Comments

[Алексей Ярков]

Блин, ну как так?! Я же это знал!!!!!!! Спасибо большое. Пойду кофейку бахну.

[Павел]

Алексей Ярков: И на старуху бывает проруха)

Answer 2

[Константин Китманов]

Стечение нескольких обстоятельств.

1. jquery выполняет обработчики событий в контексте DOM-элемента, на который они были навешены.
   
2. Когда вы объявляете стрелочную функцию, ее контекст, то есть this внутри, ссылается на контекст, где она была объявлена. По стандарту невозможно вызвать стрелочную функцию в другом контексте.
   
3. В строгом режиме запрещено обращаться к window как к this. А стрелочные функции, объявленные глобально, получают undefined в качестве this.
   
4. Использование ES6-модулей автоматически и неявно переводят код в строгий режим.
   
5. void 0 -- самый короткий способ получить undefined (хотя этот трюк уже давно не нужен).
   

Вот и получается то, что получается...

Comments

[Алексей Ярков]

Когда вы объявляете стрелочную функцию, ее контекст, то есть this внутри, ссылается на контекст, где она была объявлена.

Я ведь это знал!!!!! Долбанная невнимательность. Вот что бывает, когда болеешь и работаешь.

[Константин Китманов]

Алексей Ярков: отдыхайте больше:)

Answer 3

[Евгений]

Ну потому что:

$(".navbar-toggle").on("click", () => {
  $(this).toggleClass("active");
})

this ссылается на контекст вне этой функции нужно переписать так:

$(".navbar-toggle").on("click", (event) => {
  $(event.currentTarget).toggleClass("active");
})

Comments

[Алексей Ярков]

Блин, ну как так?! Я же это знал!!!!!!! Спасибо большое. Пойду кофейку бахну.