카테고리 없음
함수 콘텍스트 바인딩 하기
선물공룡디보
2019. 1. 9. 23:39
(공부정리)
<body>
<button type='button' id='test'>GO!</button>
</body>
<script>
var button = {
clicked:false,
click:function(){
this.clicked =true;
}
}
var elem = document.getElementById("test");
elem.addEventListener("click",button.click.bind(button),false);
</script>
버튼의 상태를 저장하기 위한 객체를 만들었다.
여기서 test 라는 ID를 가진 요소의 클릭 핸들러를 만들었는데,
button.click.bind(button) 으로 만들었다.
bind 함수를 쓴 이유는 button 객체 에서 click 메소드에 있는 this.clicked 에 있다.
클릭 이벤트 리스너에서 핸들러의 this 는 elem 가 되기 때문에 button 의 this가 되길 원한다면 bind 함수를 이용하여 바꿔야 하기 때문이다.