setTimeout을 비동기적으로 사용할 때 JavaScript에서 \"this\"의 컨텍스트를 유지하는 방법은 무엇입니까?

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

JavaScript에서 setTimeout 함수를 사용할 때 일반적으로 발생하는 문제는 "this" 키워드. 이는 setTimeout 호출을 포함하는 메소드가 다른 메소드를 참조하지만 제한 시간이 지나면 참조된 메소드가 정의되지 않는 경우에 발생합니다.

이 문제는 setTimeout 작동 방식에서 발생합니다. 함수가 setTimeout에 인수로 전달되면 해당 함수 내의 "this" 컨텍스트가 손실됩니다. 이는 setTimeout이 함수를 비동기적으로 실행하고 그때쯤이면 "this"의 원래 컨텍스트에 더 이상 액세스할 수 없기 때문입니다.

이 문제를 해결하려면 다음 두 가지 일반적인 해결 방법이 있습니다.

1. 바인딩() 메서드 사용

bind() 메서드를 사용하면 setTimeout에 전달된 함수 내에서 "this"의 컨텍스트를 보존할 수 있습니다. 다음 예에서 볼 수 있듯이 함수 끝에 ".bind(this)"를 추가하면 컨텍스트가 명시적으로 보존됩니다.

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2. 화살표 함수

화살표 함수는 "this"를 주변 컨텍스트에 자동으로 바인딩합니다. 따라서 setTimeout에 전달된 콜백 함수 내에서 올바른 컨텍스트를 유지하기 위해 추가 단계가 필요하지 않습니다.

setTimeout(() => {
    this.foo();
}, 1000);

이러한 기술을 제공된 코드 조각에 적용하면 다음과 같이 코드를 수정하여 문제를 해결할 수 있습니다.

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
};

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