'setTimeout' 콜백에 컨텍스트를 올바르게 전달할 수 있는 방법은 무엇입니까?

setTimeout 콜백에 컨텍스트 전달

setTimeout 콜백에 올바른 컨텍스트를 전달하는 것은 어려울 수 있으며, 특히 객체 메서드로 작업할 때 더욱 그렇습니다. 처음에 콜백 내에서 이를 참조할 때 전역 개체가 사용되는 경우가 많습니다.

이 문제를 해결하려면 다음과 같은 몇 가지 접근 방식이 있습니다.

1. 참조 저장(ES5 이하):

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

이 기술은 임시 변수(즉)를 사용하여 setTimeout이 호출되는 컨텍스트를 저장합니다.

2 . 바인딩 메서드(ES5 이상):

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

바인드 메서드는 미리 정의된 this 값을 사용하여 새 함수를 생성합니다. 이 경우 setTimeout을 호출하기 전에 객체에 설정됩니다.

3. 화살표 함수(ES6 이상):

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

화살표 함수는 setTimeout을 호출하는 객체와 동일한 어휘 this 컨텍스트를 상속합니다. 이렇게 하면 묶거나 보관할 필요가 없습니다.

4. setTimeout에 인수 전달(HTML5):

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

HTML5에서는 콜백에 추가 인수를 전달할 수 있는 기능을 setTimeout에 도입했습니다. 여기서는 인수로 전달되고 콜백 함수 내에서 액세스됩니다.

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