JavaScript의 `setInterval()`에서 `this` 컨텍스트를 유지하는 방법은 무엇입니까?

JavaScript의 setInterval 핸들러에서 'this' 참조 유지

JavaScript의 setInterval() 함수를 사용할 때 "this" 참조를 자주 만나게 됩니다. 문제. 이는 간격 핸들러 함수 내에서 객체의 속성이나 메서드에 액세스해야 할 때 발생합니다.

다음 코드를 고려하세요.

prefs: null,
startup: function() {
  // init prefs
  ...
  this.retrieve_rate();
  this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL);
},

retrieve_rate: function() {
  var ajax = null;
  ajax = new XMLHttpRequest();
  ajax.open('GET', 'http://xyz.example', true);
  ajax.onload = function() {
    // access prefs here
  }
}

이 예에서는 prefs 속성에 액세스하려고 합니다. ajax.onload 핸들러 함수 내에서. 그러나 간격 핸들러에서 this 참조가 손실되기 때문에 예상대로 작동하지 않습니다.

이 문제를 해결하려면 바인딩() 메서드를 사용하여 this 참조를 바인딩하는 새 함수를 만들 수 있습니다. 방법은 다음과 같습니다.

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL);

bind()를 사용하여 this 참조가 원래 개체(this)에 바인딩된 새 함수를 만듭니다. 이렇게 하면 prefs 속성이 ajax.onload 핸들러에서 올바르게 참조됩니다.

위 내용은 JavaScript의 `setInterval()`에서 `this` 컨텍스트를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!