.bind는 .call과 유사하게 this 및 인자를 바인딩하나, 당장 실행하는 것이 아닌 바인딩된 함수를 리턴하는 함수입니다.
첫번째 인자는 this, 두번째 인자부터는 필요한 파라미터를 전달합니다.
fn.bind(this값, 인자1, 인자2, ...)
bind는 call, apply에 비해 비교적 유용한 사용 예가 많이 존재합니다. 두 가지 예를 먼저 살펴봅시다.
bind는 이벤트 핸들러에서 이벤트 객체 대신 다른 값을 전달하고자 할 때 유용합니다. 아래와 같은 상황을 가정해봅시다.
<button id="btn">클릭하세요</button>
let btn = document.querySelector('#btn')
btn.onclick = handleClick
function handleClick() {
console.log(this)
}
handleClick에서 확인하는 this 값은 무엇일까요?위의 예제에서 bind를 써서 this를 변경하는 방법을 알아봅시다.
let btn = document.querySelector('#btn')
// 추후 이벤트에 의해 불리게 될 함수에서, this는 {hello: 'world'}가 됩니다.
btn.onclick = handleClick.bind({ hello: 'world'})
function handleClick() {
console.log(this)
}
조금 더 유용한 예제를 살펴봅시다. 동적으로 여러 개의 버튼을 만들고, 각각의 이벤트 핸들러에 각기 다른 값을 바인딩해야 할 경우를 생각해봅시다. (Twittler 스프린트에서 이와 비슷한 구현을 경험해보았을 것입니다.)
다음 예제에서 기대하는 결과는 각 버튼을 클릭할 때에, 이름이 콘솔로 표시되게 만드는 것입니다.
<div id="target"></div>