setTimeout 함수 내부의 this

아래의 코드에서 setTimeout 함수를 이용하던 중 함수 내부의 this와 함수 외부의 this가 다른 것을 가르키는 것을 확인했습니다.

let elem = document.querySelector('#' + this._id + ' #' + elemId);
if (elem == null) {
	setTimeout(function () {
		elem = document.querySelector('#' + this._id + ' #' + elemId);
	});
}

 

setTimeout 함수

setTimeout 함수는 비동기 함수로서, 일정 시간이 경과한 후에 함수를 실행하는 기능을 제공합니다. 따라서 setTimeout 함수 내부에서는 콜백 함수를 정의하여 사용해야 합니다.

 

setTimeout 함수의 this

그러나 이 문제에서 콜백 함수 내부에서 this._id를 참조하면 undefined가 반환되는 이유는, this의 바인딩이 원래의 객체에서 벗어나서 setTimeout 함수 내부에서는 this가 window 객체를 참조하기 때문입니다.

이 문제를 해결하기 위해서는, setTimeout 함수 내부에서 this를 사용하지 않고, 외부에서 선언한 변수를 사용하도록 수정해야 합니다. 예를 들어, 아래와 같이 that 변수를 선언하고, 그 변수를 이용하여 _id를 참조할 수 있습니다.

let that = this;
setTimeout(function () {
  elem = document.querySelector('#' + that._id + ' #' + elemId);
});