JavaScript의 비동기 콜백 함수에서 "this"에 액세스

Question

아래 스 니펫과 같이 비동기 콜백 함수에서 부모 "this"를 참조하려면 어떻게해야합니까?

var imaginaryAjaxCall = function (fn) { 
    setInterval(fn, 1000); 
} 

function parent() { 
    this.foobar = "foo"; 

    imaginaryAjaxCall(function() { 
     this.foobar = "bar"; 
    }); 
} 

다음은 테스트를 위해 jsfiddle의 : http://jsfiddle.net/r0ueon53/11/

편집 : 내가 질문을 돌진하고, 그것을 것이지. 이 편집과 관련없는 일부 의견을 제출해 죄송합니다.

Answer 1

자바 스크립트는 단일 스레드에서 실행됩니다. fn을 일정한 간격으로 실행하도록 설정하면 비동기 방식으로 작동하는 DOM API에 액세스합니다 (실제로는 비동기는 아니지만). interval 일 때마다 DOM API가 콜백 대기열에 콜백을 삽입합니다. 통과했다. 따라서 0ms마다 (실제로는 4ms에 가까워 지지만 다른 주제입니다) fn이 콜백 대기열에 삽입됩니다. 이제

는 콜백 큐의 콜백은 대신 콜백

document.getElementById('out').innerHTML = this.foobar; 

그것은 "foo는"출력 이유입니다, 실행 된 후까지 달렸다을하지 않는, 호출 스택이 비어있을 때 달렸다을 얻을, 그래서 의 "막대".

http://jsfiddle.net/r0ueon53/13/

두 번째로 그 라인을 지연하는 경우, 당신은 대신 출력 "바"를 볼 수 있습니다.

setTimeout(function() { 
    document.getElementById('out').innerHTML = that.foobar; 
}, 1000); 

http://jsfiddle.net/r0ueon53/12/

setTimeout 따라서 값을 "바"변경된 콜백 setInterval을 한 결과, 1 초 후에 콜백으로 콜백 큐의 삽입되므로이 작동한다. 이 문제를 해결하기 위해에서는 setTimeout을 사용하여, 아약스를 처리 할 때

---

분명히

인해 네트워크 속도의 차이로 일관 될 수 없습니다. 대신에 .innerHTML을 ajax 호출에 전달한 콜백으로 옮겨야합니다.