Как удалить класс при клике на событие?

03 мая 2021, 15:30

Source: ссылка

Summary:

this.overlay.addEventListener('click', function(){
     this.closed();
   });

В данном коде не срабатывает событие на отключение оверлэея(удаление класса), ну если конечно использовать стрелочную функцию, типа

this.overlay.addEventListener('click', ()=>{
         this.closed();
});

то все ОК. Ну мне просто нужно понять, как это решить без стрелочных функций. Я просто угадал, когда использовал arrow func , но есть такие методы call или bind(я точно не знаю) которые смогут помочь исправить это, ВОЗМОЖНО Я ОШИБАЮСЬ. Хочу докопаться до сути!

Помогите чайнику!

Answer 1

this.overlay.addEventListener('click', (function(){
  this.closed();
}).bind(this));

или

var that = this;
this.overlay.addEventListener('click', function(){
  that.closed();
});

Answer 2

Попробуй вот такой вариант.

   this.overlay.addEventListener('click', function(){
     this.closed();
   }.bind(this));

У тебя теряется контекс. Тебя надо вызвать bind() и оперделить ему контекст(this).

У стрелочный функции логика работы отличается.Они лексически привязаны к значению this (но не привязаны к собственному this, arguments, super, или new.target).

До появления стрелочных функций, каждая новая функция имела своё значение this (новый объект в случае конструктора, undefined в strict режиме вызова функции, контекст объекта при вызове функции как "метода объекта" и т.д.). Это очень раздражало при использовании объектно-ориентированного стиля программирования.