함수 바인딩

함수 바인딩이란 특정한 this값과 특정한 매개변수를 넘기면서 다른 함수를 호출하는 함수입니다.

많은 자바스크립트 라이브러리들은 함수를 특정한 컨텍스트에 묶는 함수를 만들었습니다.

일반적으로 이런 함수를 bind()라고 부릅니다.

기본 구조는 아래와 같습니다.

function bind(fn, context){
    return function(){
        return fn.apply(context, arguments);
    }
}

ECMAScript5에서 bind()메서드가 도입되었으며 아래와 같이 사용하면 됩니다.

var handler = {
    message : "Event handled",
    handleClick: function(event){
        alert(this.message + ":" + event.type);
    }
};

var btn = document.getElementById("my-btn");
btn.addEventListener("click", handler.handleClick.bind(handler));

함수를 여러번 호출해야되서 느리니 꼭 필요할 때만 사용합니다.

마치며

함수 커링등 설명할게 많은 부분이었지만 추후에 모아서 한번에 제대로 정리하려고 보류했습니다.
그런 이유로 함수 바인딩에 대해서만 간단하게 알아보았으며 종합적으로 정리해서 추후에 링크추가예정입니다.

참고

slidedeck에 Luatical님이 올리신 설명도 참고 하시면 좋습니다.
함수형 프로그래밍 - 바인드 (lunatical)

​
이 포스트는 프론트엔드 개발자를 위한 자바스크립트(인사이트)에서 발췌한 내용이 포함되어 있습니다.
내용 전문이 아니기 때문에 자세하게 알고싶으신 분은 프론트엔드 개발자를 위한 자바스크립트(인사이트) 서적을 참고 하시길 바랍니다.


저작자표시