setTimeout 및 JavaScript에서 파악하기 어려운 "this"

setTimeout 함수를 사용할 때 개발자는 메서드에 대한 후속 호출이 손실되는 문제에 자주 직면합니다. 의도된 컨텍스트로 인해 정의되지 않은 것처럼 보이는 메서드가 발생합니다. 이는 일반적으로 "this" 참조가 손실되었기 때문에 발생합니다.

문제:

다음 코드를 고려하세요.

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i  1) {
            return document.images[i];
        }
    }
};

초기 페이지 로드 시 method2 함수가 의도한 대로 작동합니다. 그러나 시간 초과를 설정한 후 이후에 method2를 호출하면 정의되지 않았음을 나타내는 오류가 발생합니다.

해결책:

핵심 문제는 setTimeout이 처리하는 방식에 있습니다. this 키워드. setTimeout(this.method, 5000)을 사용하여 시간 제한을 설정하면 컨텍스트가 손실되어 오류가 발생합니다.

이 문제에 대한 영리한 해결책은 바인딩() 메서드를 사용하는 것입니다. 메서드 호출 끝에 ".bind(this)"를 추가하면 컨텍스트를 명시적으로 바인딩할 수 있으므로 시간 초과 후에도 올바른 "this" 참조가 유지됩니다.

개선된 코드 :

test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

이 수정을 통해 "this"의 컨텍스트가 올바르게 바인딩되어 제한 시간이 만료된 후에도 method2가 의도한 대로 계속 작동할 수 있습니다. 이 접근 방식은 올바른 실행 컨텍스트를 유지하는 데 우아하고 효과적입니다.