Question

我正在学习如何使用javascript类。我在理解如何让事件监听器调用类中的方法时遇到了一些困难。具体来说，每当我在点击时调用 this.infoBoxActive 时，方法中的所有变量都将返回undefined。

我最终想要做的是有一个切换方法，onclick在true和false之间切换，然后根据其状态调用infoBoxActive或infoBoxDective。我一天中大部分时间都在玩我的代码尝试各种各样的事情，但我似乎引发了我的变量未定义的相同问题。如果我直接调用方法，我的一切都很有效。

我一直在使用承诺从本地JSON文件中收集我的数据，但我不确定如何在我的决心中返回对象，所以现在我打电话给我所有新的来自承诺的课程。我不知道这是不是问题的一部分。

我曾尝试阅读一些相似的帖子，但要么我无法理解解决方案，要么与我的确切问题无关，所以如果这是重复，我会道歉。

class EpisodeInfoBox extends Episode {
  constructor({ title, date, description, tracklist } = {}) {
    super({ title, date, description, tracklist })

    this.titleContainer = document.querySelector('.episode-title');
    this.dateContainer = document.querySelector('.episode-date');
    this.descriptionContainer = document.querySelector('.episode-description');
    this.tracklistContainer = document.querySelector('.episode-tracklist');

    this.infoBoxButton = document.getElementById('infoBoxButton');

    this.infoBoxButton.addEventListener('click', this.infoBoxActive);
  }



  infoBoxActive(){
    this.titleContainer.innerHTML = this.title;
    this.dateContainer.innerHTMLs = this.date;
    this.descriptionContainer.innerHTML = this.description;

    // Creates list-items for track list
    let tracklistHTML = '';
    for (let i = 0; i < this.tracklist.length; i++) {
      tracklistHTML += `<li>${this.tracklist[i].song} - ${this.tracklist[i].artist}</li>`;
    }
    this.tracklistContainer.innerHTML = tracklistHTML;
  }
}

我的承诺

export default function service(url) {
  return new Promise(function(res, rej) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = handleResponse;
    xhr.onerror = function(error) {
      rej(error)
    }
    xhr.send();

    function handleResponse() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var resObject = JSON.parse(xhr.responseText);
          res(resObject)
        } else {
          rej(this.statusText)
        }
      }
    };
  });
}

我的决心

function callService(){
  service('/data/episodes.json')
    .then(retrieveEpisode)
    .then(makeEpisode)
    .catch(function(e) {
      console.log(e)
    });
}

function retrieveEpisode(episodeArray) {
  return episodeArray[0];

}

function makeEpisode(episode){
  let newEpisode = new Episode(episode);
    newEpisode.setEpisodeImage();
  let newAudioPlayer = new AudioPlayer(episode);
  let newEpisodeInfoBox = new EpisodeInfoBox(episode);
}

Answer 1

改变这个：

 this.infoBoxButton.addEventListener('click', this.infoBoxActive);

到此：

this.infoBoxButton.addEventListener('click', this.infoBoxActive.bind(this));

当调用事件侦听器时，它不会设置对象的this指针，因此调用infoBoxActive()的{{1}}值不合适，因此您看不到属性你期待。您可以在调用方法之前使用上面显示的this重新附加相应的.bind()值。

在Javascript中，当您将this作为参数传递给函数时，会传递对this.infoBoxActive方法的引用，但根本没有与.infoBoxActive的连接。它只是对函数的引用。因此，侦听器然后调用该函数并为this设置自己的值，这不是您的对象。使用this，您可以创建一个函数存根，在调用函数时为您设置.bind()的值。

在类方法中使用事件侦听器来调用另一个返回undefined的类方法

1 个答案: