"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > JavaScript에서 `setTimeout`을 사용할 때 `this`로 컨텍스트를 유지하는 방법은 무엇입니까?

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

2024-11-09에 게시됨
검색:618

How to Preserve Context with `this` When Using `setTimeout` in JavaScript?

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

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

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

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

Solution:

시간 제한 콜백 내에서 의도한 컨텍스트를 유지하려면 .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가 올바르게 호출될 수 있습니다.

릴리스 선언문 이 글은 1729735296에서 재인쇄되었습니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3