bind
Function
객체에서 기본적으로 가지고 있는 메소드 중 call
, apply
, bind
를 많이 사용하는데 이 세 가지의 차이점을 알아보자.
우선 call
과 apply
는 함수를 즉시 호출하고 컨텍스트를 수정할 때 사용된다.
(call과 apply에 대해 자세히 알아보기)
그러나 bind
는 해당 함수를 나중에 이벤트에서 유용한 특정 컨텍스트로 호출할 때 사용된다.
정리하면, call
과 apply
는 즉시 함수를 호출하지만 bind
는 나중에 실행될 때 함수를 호출하기 위한 올바른 컨텍스트를 갖게되는 함수를 반환한다.
bind
를 사용하여 비동기 콜백 및 이벤트에서 컨텍스트를 유지 관리할 수 있고, 특정 함수에 대해 원본 함수와 동일한 본문을 갖는 바인딩된 함수를 만든다.
다음 예제를 보자.
Example
1 | function Button(content) { |
9행에서 Button
형 객체인 myButton
를 만들었고, 인자 값은 OK
이다. 이 때, 10행과 같이 myButton.click()
을 실행하면, 프로토타입 체인에 의해서 OK clicked
가 정상적으로 출력이 된다.
하지만 12행에서는 myButton.click
을 looseClick
에 담고, 13행에서 looseClick()
을 실행했다. 그러나 이렇게 하면, 12행에서 이미 click
함수가 종료되었기 때문에 13행에서는 this.content
를 찾을 수 없게 되어 undefined
가 뜬다.
bind
메소드는 이와 같은 문제를 해결해준다. bind
메소드는 특정 함수에 대해 원본 함수와 동일한 본문을 갖는 바인딩된 함수를 만들기 때문에, 16행에서 boundClick()
을 실행하면 정상적으로 OK clicked
가 출력이 된다.
bind의 인자 추가 기능
1 | var sum = function(a, b) { |
5~6행은 일반적인 함수 호출방법이다. sum
이라는 함수에 인자를 전달하여 return
된 값을 add1
에 저장하고, 출력한다.
그러나 8행을 보면, 첫 번째 인자로 null
이 주어졌고, 이후에 9행에서 add2
의 인자값으로 10
이 주어졌다.
이렇게 bind
를 사용하면 나중에 인자값을 추가할 수 있으며 이 인자는 원래 함수의 매개변수로 전달한다. 나중에 바인딩 된 함수에 전달하는 모든 추가 매개변수는 바인딩된 매개변수 다음에 전달된다.