JavaScript에서 setTimeout을 사용할 때 \"this\" 참조를 유지하는 방법은 무엇입니까?

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 < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

On 초기 페이지 로드 시 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가 의도한 대로 계속 작동할 수 있습니다. 이 접근 방식은 올바른 실행 컨텍스트를 유지하는 데 있어 우아하면서도 효과적입니다.

위 내용은 JavaScript에서 setTimeout을 사용할 때 \"this\" 참조를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!