JavaScript에서 `setTimeout`을 사용할 때 `this`로 컨텍스트를 유지하는 방법은 무엇입니까?

JavaScript에서 setTimeout 사용 및 컨텍스트 보존

JavaScript에서 setTimeout 함수를 사용할 때 처리 방법을 알아야 합니다. 이것의 맥락. 이는 시간 초과 콜백 내에서 다른 컨텍스트에 정의된 메서드를 호출할 때 특히 중요합니다.

제공된 코드 조각에서 메서드 함수는 전달된 ID를 기반으로 이미지 요소를 검색하고 해당 src 속성을 설정하는 method2를 호출합니다. . 처음에는 method2가 성공적으로 실행됩니다. 그러나 setTimeout 지연 후에는 method2 함수가 의도한 컨텍스트 내에서 더 이상 정의되지 않기 때문에 오류가 발생합니다.

setTimeout이 새로운 실행 컨텍스트를 생성하고 this 키워드가 전역 개체로 기본 설정되기 때문에 문제가 발생합니다. 제공된 코드에서는 테스트 프로토타입의 컨텍스트를 사용하여 메소드 함수가 호출되지만, 타임아웃 콜백이 실행되면 this 컨텍스트가 전역 객체로 변경됩니다.

해결책:

타임아웃 콜백 내에서 의도한 컨텍스트를 유지하려면 .bind() 메서드를 사용하여 컨텍스트 바인딩을 명시적으로 설정할 수 있습니다. setTimeout에 전달되는 함수의 끝에 .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
};

.bind(this)를 추가하면 콜백 함수 내의 this 키워드가 테스트 프로토타입에 바인딩되어 setTimeout 지연 후에도 프로토타입 메서드의 컨텍스트 내에서 method2가 올바르게 호출될 수 있습니다.

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