Как понять контекст в js, всю голову сломала?

Question

[Кристина]

Вот отрывок кода, в chrome работает, в mozille пишет event not defined

Я поняла замыкание, поняла контекст в общем, но с событиями вообще не понимаю, что происходит. Делала декоратор, но я не понимаю почему он работает именно так)

Тыкните в меня примером, я расстроена !

export default class MyClass {

	start() {
		this.elem = document.querySelector('.elem');
		this.elem.addEventListener('click', () => this.check(event));
	}

	check(e) {
    //код
	}

}

Answer 1

[Антон Швец]

export default class MyClass {

  start() {
    this.elem = document.querySelector('.elem');
    this.elem.addEventListener('click', (event) => this.check(event));
  }

  check(e) {
    //код
  }

}

или

this.elem.addEventListener('click', this.check.bind(this));

в первом случае мы передаем в функцию коллбек для addListener наш контекст и, соответственно, его метод через замыкание.
во втором случае создаем функцию с прибитым гвоздями контекстом используя bind, и передаем ее как коллбек в addListener

Comments

[Кристина]

Спасибо!) А вот с этой привязкой я пока вообще не дружу, не могу понять как это работает)

[Антон Швец]

Кристина, this.check указывает нам на свойство объекта check. В нем хранится указатель на функцию. Если будет addEventListener('click', this.check), мы просто отдадим в параметр этот указатель на функцию , т.е. набор инструкций где-то в памяти. В этих инструкциях this это просто обозначение, указатель на текущий контекст.

Когда event произойдет, функция (напоминаю, просто набор инструкций) по адресу this.check будет вызвана, контекстом для нее будет уже элемент, на котором сработало событие.

Если мы используем bind. он вернет нам специальную функцию, которая не воспринимает контекст выполнения, а использует свой собственный, определенный при ее создании (аргумент в bind).

Сделав this.check.bind(this) получаем спецфункцию, контекст которой будет совпадать с текущим, мы передали this в bind, this у нас это экземляр MyClass

[Кристина]

Антон, Спасибо, буду экспериментировать, чтобы понять нормально!)

[Антон Швец]

Кристина, могу добавить, что в случае (event) => this.check(event)
this берется из лексического окружения анонимной функции в момент ее создания, т.е. на this указывает на экземлпяр MyClass

[Антон Швец]

Кристина, переписал коммент, может так понятней

[Кристина]

Антон, Спасибо за разъяснение! Помогло, но нужно переварить :)

Answer 2

[Никита Егоров]

this.elem.addEventListener('click', event => this.check(event));

Comments

[Кристина]

Спасибо огромное!)