Как исправить: «Не удается прочитать свойство undefined» экземпляра объекта?

Question

Я пытаюсь создать шаблон MVC для клона tinder (это для школьного проекта).

Я могу получить доступ к this.model и this.view в функции конструктора, но как только я пытаюсьчтобы выполнить метод за пределами конструктора, моя переменная кажется «неопределенной».

Кажется, что this. переменные выходят из области видимости и теряются?

Я пытался выйти из системы как в конструкторе, так и в методе "likeUser", но только конструктор дает мне значение, другой консольный журнал выдает ошибку.

используемые плагины: eslint

используемый компилятор: webpack

import Event from './Event';
import View from '../view/View';
import Model from '../model/Model';

class Controller extends Event {
  constructor() {
    super();
    this.view = new View(document);
    this.model = new Model(localStorage);

    // console.log(this.model)
    // console log will show the instance

    this.model.setToZero();
    this.model.checkFirstFetch('https://randomuser.me/api/?results=10');

    this.profiles = this.model.selectProfiles();
    this.index = this.model.selectSwipeCounter();

    this.view.profile(this.profiles, this.index);

    this.listen('.select__likes', 'click', this.view.likes);
    this.listen('.select__dislikes', 'click', this.view.dislikes);

    //Event listener  will execute "likeUser()"
    this.listen('.btn__like', 'click', this.likeUser);
    this.listen('.btn__dislike', 'click', this.dislikeUser);
  }

  likeUser() {
    // console.log(this.model)
    // shows error 'Cannot read property 'selectProfiles' of undefined'

    console.log(this.model.selectProfiles());

    try {
      this.profiles = this.model.selectProfiles();
      this.index = this.model.selectSwipeCounter();
      this.model.addLike(this.profiles[this.index]);

      if (this.model.needNewUsers()) this.model.fetchProfiles();

      this.index += 1;
      this.model.setSwipeCounter(this.index);
      this.view.addLike(this.model.getArray('likes'));
      this.view.profile(this.profiles, this.index);
    } catch (e) {
      console.log(e.message);
    }
  }
}

Я ожидаю, что функция вернет массив профилей в localStorage, вместо этого она вернет: 'Cannot read property'selectProfiles' из неопределенного '

Answer 1

Используйте .bind(this) каждый раз, когда вы звоните likeUser()

this.listen('.btn__like', 'click', this.likeUser.bind(this));

Вы также можете попробовать другой подход, чтобы избежать необходимости набирать .bind каждый раз. Удалите все экземпляры .bind и добавьте эту строку после super():

this.likeUser = this.likeUser.bind(this);

Сделайте это для каждой функции, в которой вам нужно будет поделиться this с конструктором.

Thisметод делает this одинаковым в конструкторе и в связанной функции.

-

Кстати, ваш dislikeUser(), похоже, отсутствует.