난 그냥 자바 스크립트 클래스를 사용하는 방법을 배우고

Question

을 undefined를 반환합니다. 이벤트 리스너가 클래스 내에서 메서드를 호출하는 방법을 이해하는 데 어려움이 있습니다. 내가 전화 할 때마다 특히, this.infoBoxActive는 클릭에 방법에 내 모든 변수는 정의되지 않은 반환합니다.

은 내가 결국하고 싶은 것은 온 클릭 진실과 거짓 사이를 전환 한 후 infoBoxActive 또는 infoBoxDective 중 하나는 상태에 따라 호출하는 토글 방식을 가지고있다. 나는 여러 가지 일을 시도하면서 대부분의 코드를 가지고 놀았지만 내 변수의 동일한 문제는 정의되지 않은 것으로 보입니다. 직접 메소드를 호출하면 모든 것이 잘 작동합니다.

로컬 JSON 파일에서 데이터를 수집하겠다는 약속을 사용하고 있지만 해결 방법으로 Object를 반환하는 방법을 알지 못했지만 약속에서 모든 새 클래스를 호출하고 있습니다. 이것이 문제의 일부인지 나는 모른다.

나는 유사성의 일부 게시물을 읽는 시도했지만, 하나 나는 솔루션을 이해할 수 없습니다 또는 내 정확한 문제에 관한되지 않은, 그래서 이것은 중복 인 경우 내가 죄송합니다.

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)); 

0, 그것은 개체의 this 포인터가 this의 부적절한 값이 너무 infoBoxActive()를 호출 설정이되지 않으며, 따라서 당신은 당신이 기대하는 속성을 볼 수 없습니다. 위에 표시된대로 .bind()을 사용하여 메서드를 호출하기 전에 적절한 값을 다시 연결할 수 있습니다. 자바 스크립트에서

---

, 당신은 함수에 인수로 this.infoBoxActive을 통과 할 때 .infoBoxActive 메서드에 대한 참조를 전달하지만, 전혀 this에 아무 관련이 없다. 그것은 단지 함수에 대한 참조 일뿐입니다. 따라서 리스너는 해당 함수를 호출하고 객체가 아닌 this에 대해 자체 값을 설정합니다. .bind()을 사용하면 함수를 호출 할 때 this의 값을 설정할 함수 스텁을 만들 수 있습니다.