Как использовать методы в методах класса и обработчики событий в методах класса?

Question

[Влад]

Пытаюсь изучать ООП в JS :)
Подскажите, как сделать что-то подобное?

<a id="mylink" href="#">Click</a>

<script type="text/javascript">
    class someClass {
        constructor(params) {
            this.mylink = params.link
        }

        hide() {
            console.log('Hiding...');
        }
        show() {
            console.log('Showing...');
        }

        handlerClick() {
            console.log('Link clicked');
            hide();
            show();
        }

        start() {
            this.mylink.addEventListener('click', this.handlerClick);
        }
    }

    new someClass({
        mylink: '#mylink'
    }).start();
</script>

Чтобы получить в консоли:
Link clicked
Hiding...
Showing...

Comments

[Kovalsky]

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

[Влад]

Kovalsky,
Прочитал. Вот так ведь должно работать, но не работает:

<a id="mylink" href="#">Click</a>

<script type="text/javascript">
    class someClass {
        constructor(params) {
            this.mylink = document.querySelector(params.mylink);
        }

        hide() {
            console.log('Hiding...');
        }
        show() {
            console.log('Showing...');
        }

        // handler
        handlerClick() {
            console.log('Link clicked');
            this.hide();
            this.show();
        }

        start() {
            this.mylink.addEventListener('click', this.handlerClick);
        }

        checkParams() {
            console.log(`mylink: ${this.mylink}`);
        }
    }

    new someClass({
        mylink: '#mylink'
    }).start();
</script>

При клике консоль выводит ошибку:
Uncaught TypeError: this.hide is not a function

[Kovalsky]

Влад, ну вы же видите текст ошибки - "this.hide is not a function". Ищем по коду где у вас вызывается функция hide, находим её в функции handlerClick. Раз this.hide это не функция значит можно сделать вывод, что функция handlerClick вызвана в каком-то неправильном контексте, не в контексте экземпляра someClass. Посмотрите чему равен this в этой функции

[Sergey Mukhin]

Влад, гугли "потеря контекста". У тебя он при вызове this.handlerClick внутри addEventListener теряется.

[Влад]

Kovalsky, нормально всё с this в handlerClick — если отдельно её вызвать, всё работает, а если в качестве обработчика события, то нет. Как передать туда this? вот в чём вопрос.

[Kovalsky]

Влад, Очевидно что с this не всё "нормально". Чему у вас this равен при клике?

[Влад]

Kovalsky,

start() {                
   this.mylink.addEventListener('click', () => console.log(this));
}

> Object { mylink: a#mylink }

[Kovalsky]

Влад, ну во первых это вы мне показали стрелочную функцию, её ключевым отличием от обычных функций как раз является особое отношение к контексту. А во вторых вы же не читаете что я пишу; я вот пишу "функция handlerClick вызвана в каком-то неправильном контексте, не в контексте экземпляра someClass. Посмотрите чему равен this в этой функции". Речь о функции handlerClick. Не абстрактной функции которую вы объявляете локально, а именно о handlerClick, потому что проблема с контекстом именно у неё

[Влад]

Короче говоря, получилось только вот таким образом:

...
handlerClick() {
    console.log('Link clicked', this);
    self.hide();
    self.show();
}

start() {
    window.self = this;             
    this.mylink.addEventListener('click', this.handlerClick);
}
...

Но такой способ мне не очень нравится. Определять self глобально как-то совсем не хочется. Как можно улучшить код?

[FODD]

Влад,

this.mylink.addEventListener('click', this.handlerClick.bind(this));

[Влад]

FODD, спасибо. Почитал про контекст, понял как это работает.

И ещё один вопрос. А вот так в методах класса корректно будет объявлять, привязывать и использовать переменную? Или лучше в конструкторе объявлять её начальное значение? Или это непринципиально?

handlerClick() {
    console.log('Link clicked', this);
    this.hide();
    this.show();
    console.log(this.counter++);
}

start() {
    this.counter = 1;
    this.mylink.addEventListener('click', this.handlerClick.bind(this, this.counter));
}