Почему в constructor(){} класса выполняется обработчик, навешанный через jQuery?

Question

[Денис Букреев]

constructor () {
    this.$close = $('.modal__close');

    this.$close.on('click',  this.close());

В методе close у меня прописан console.info('closed') и он выводится при загрузке страницы. Сам клик в дальнейшем не срабатывает.

Answer 1

[Илья]

this.$close.on('click', this.close());
Замените на:
this.$close.on('click', this.close);
Нужно передавать функцию, а вы передаёте результат функции.

Comments

[Денис Букреев]

блин, уже не первый раз на это напарываюсь
спасибо

[Денис Букреев]

еще вопросянский: при таком вызове метода через jQ почему-то переписывается this объекта и он после вызова содержит в себе объект jQuery, на который был навешан клик. Как это понимать?

До этого я писал на нативном JS, все было отлично

[Петр]

Денис Букреев: И теперь передаете функцию, а не метод. Т.е. внутри close вы не будете знать о классе. this будет указывать на '.modal__close'

[Денис Букреев]

Петр: не очень понял всей этой механики, понял лишь, что мне надо толстую стрелку использовать и вызывать it.close() со скобками)
надо, конечно, углубиться в основы JS

Answer 2

[Слава]

this.$close.on('click', this.close.bind(this));

или на jquery

this.$close.on('click', $.proxy(this.close, this));

или на es6
this.$close.on('click', (e) => this.close(e));