setTimeout 콜백에서 올바른 'this' 컨텍스트를 어떻게 보존할 수 있습니까?

"this"를 사용하여 setTimeout 콜백에서 컨텍스트 보존

setTimeout을 사용하여 지연 후 콜백을 예약할 때 액세스하려는 경우가 일반적입니다. setTimeout 호출이 이루어진 함수의 컨텍스트입니다. 그러나 setTimeout은 전역 개체를 가리키는 "this"를 사용하여 콜백을 실행하므로 콜백이 인스턴스 멤버를 참조하는 경우 예기치 않은 동작이 발생할 수 있다는 점을 기억하는 것이 중요합니다.

이 문제를 해결하려면 몇 가지 방법이 있습니다. 접근 방식:

1. 컨텍스트에 대한 참조 저장:

가장 간단한 해결책은 setTimeout을 호출하기 전에 올바른 컨텍스트에 대한 참조를 저장하는 것입니다. 그런 다음 이 참조를 콜백 함수에 매개변수로 전달할 수 있습니다.

var that = this;
if (this.options.destroyOnHide) {
    setTimeout(function() { that.tip.destroy() }, 1000);
}

2. 바인드 방법 사용(ES5):

바인드 방법을 사용하면 "this" 값이 미리 결정된 새 함수를 만들 수 있습니다. 이렇게 하면 컨텍스트에 대한 참조를 수동으로 저장할 필요가 없습니다.

if (this.options.destroyOnHide) {
    setTimeout(function(){ this.tip.destroy() }.bind(this), 1000);
}

3. 화살표 함수 사용(ES6):

화살표 함수에는 자체 "this" 값이 없습니다. 대신, 둘러싸는 어휘 범위에서 "this" 값을 상속합니다. 따라서 콜백의 컨텍스트를 유지하는 데 이상적입니다.

if (this.options.destroyOnHide) {
    setTimeout(() => { this.tip.destroy() }, 1000);
}

4. 컨텍스트를 인수로 전달(ES5):

HTML5에서는 setTimeout의 콜백 함수에 인수를 전달할 수 있습니다. 이를 통해 사용할 컨텍스트를 명시적으로 지정할 수 있습니다.

if (this.options.destroyOnHide) {
    setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

이러한 접근 방식을 이해하면 setTimeout 콜백에서 올바른 컨텍스트를 효과적으로 유지하고 예상치 못한 동작을 방지할 수 있습니다.

위 내용은 setTimeout 콜백에서 올바른 'this' 컨텍스트를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!