0

JavaScriptクラスの使い方を学んでいます。イベントリスナーがクラス内のメソッドを呼び出す方法を理解するのに苦労しています。具体的には、クリック時にthis.infoBoxActiveを呼び出すたびに、メソッド内のすべての変数が未定義を返します。

私が最終的にやりたいことは、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);
}
4

1 に答える 1

1

これを変える：

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

これに：

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

イベントリスナーが呼び出されると、オブジェクトのthisポインターが設定されないためinfoBoxActive()、不適切な値で呼び出されるためthis、期待するプロパティが表示されません。.bind()上記のように使用してthis、メソッドを呼び出す前に適切な値を再アタッチできます。

Javascriptではthis.infoBoxActive関数に引数として渡すと、メソッドへの参照.infoBoxActiveは渡されますが、 への接続は一切ありませんthis。関数への単なる参照です。thisしたがって、リスナーはその関数を呼び出し、オブジェクトではない独自の値を設定します。を使用すると、関数を呼び出すときに.bind()の値を設定する関数スタブを作成できます。this

于 2016-11-11T23:27:33.710 に答える