코어 자바스크립트 질문입니다!

Question

코어 자바스크립트 138~139페이지 질문입니다(이미지가 두 개 동시에 안 올라가네요 ㅠ) debounce함수는 콜백으로써 호출되는 함수이지만, addEventListener에 의해 debounce함수 내의 this는 document.body가 되는 것으로 알고 있습니다. 그렇다면 mousemove혹은 mousewheel이벤트가 발생했을 때, debounce함수가 내뱉은 익명함수가 실행될 것이고, 여기에서 self에 할당한 this는 document.body가 되는 것이죠...? 그런데 이 self를 왜 func에 bind해주어야 하는지 잘 이해가 되지 않습니다 ㅠ 인자로 받는 func는 moveHandler나 wheelHandler함수인데, 이 두 함수의 경우 console.log만을 수행할 뿐, this에 접근할 일이 없는데 왜 bind 작업이 필요한 건가요...?

정재남 · Answer

책의 예제상에서는 this에 접근하지 않았지만, 일반적으로는 이벤트 핸들러에서 this를 사용할 경우가 많은데, 그 경우에 원래의 addEventListener의 콜백함수에 부여되는 this를 그대로 바라볼 수 있도록 해준 것입니다. moveHandler 함수 내부에서 this를 출력해보시고, 아래(this 바인딩을 제거한 버전)과 비교해 보시기 바랍니다. var debounce = function (eventName, func, wait) { var timeoutId = null; return function (event) { console.log(eventName, 'event 발생'); clearTimeout(timeoutId); timeoutId = setTimeout(func, wait); }; }; var moveHandler = function (e) { console.log('move event 처리'); console.dir(this); } document.body.addEventListener('mousemove', debounce('move', moveHandler, 500));