'setTimeout' 콜백에서 올바른 'this' 컨텍스트를 유지하는 방법은 무엇입니까?

setTimeout 콜백에서 이 컨텍스트가 올바른지 확인

setTimeout을 활용하여 콜백 함수를 예약할 때 함수가 원하는 맥락. 그러나 이것이 콜백 내의 전역 개체를 참조하면 문제가 발생합니다.

제공된 예에서:

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

이는 의도한 개체가 아닌 전역 창을 나타냅니다. 이를 방지하려면 다음과 같은 몇 가지 접근 방식이 있습니다.

1. 컨텍스트 저장:

setTimeout을 호출하기 전에 현재 컨텍스트에 대한 참조를 저장하세요.

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

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

바인드를 사용하여 올바른 컨텍스트에 바인딩된 새 함수를 만듭니다.

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

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

화살표 함수는 어휘에서 this 값을 자동으로 상속받습니다. 범위.

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

4. 콜백에 인수 전달(HTML5):

HTML5의 타이머를 사용하면 콜백에 인수를 전달할 수 있습니다.

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

함수가 어떻게 되는지에 따라 맥락이 달라질 수 있다는 점을 기억하세요 호출되었습니다. 원하는 동작을 보장하려면 사용 가능한 언어 기능을 기반으로 적절한 접근 방식을 고려하세요.

위 내용은 'setTimeout' 콜백에서 올바른 'this' 컨텍스트를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!