흔히 쓰는 javascript binding function을 간단한 예제로 소개(?)하고자 합니다.
예제로 적합하진 않겠지만 덧셈연산을 하는 자바스크립트 함수를 만든다고 가정해 보겠습니다.
function bindPlus(n,m){
return function (){plus(n,m)}
}
btn1.onclick=function(){bindPlus(1,2);}
btn2.onclick=function(){bindPlus(3,4);}
위와 같이 아주 간단하게 사용할 수 있습니다.
이번에는 아래와 같이 좀 다르게 해보겠습니다. 혹!!! 별 차이가 없어 보일지 모르지만 원치 않는 closure를 막는데 유용합니다.
function bindArguments(fn){
var args = [];
for(var n=1; n<arguments.length; n++){
args.push( arguments[n]);
}
return function(){return fn.apply(this, args);};
}
btn1.onclick = bindArguments(plus, 1,2);
btn2.onclick = bindArguments(plus, 2,3,4,5);
그럼 prototype에 있는 bind 함수의 예제를 들어보겠습니다.
this.value="this.value";
funtion getValue(){
return this.value;
}
var sample={
value:"sample.value";
getValue: function(){return this.value;}
}
/****** call function *******/
getValue();
sample.getValue();
/****** call function *******/
자 결과는 뻔하겠죠?
위의 샘플 코드에서 /****** call function *******/ 주석 사이에 코드들을 다음과 같이 바꿔 보겠습니다.
functinon func1(fn){
fn();
}
var test = sample.getValue.bind(sample);
getValue(sample.getValue);
getValue(test);
첫번째 getValue 함수의 output은 "this.value", 두번째 getValue 함수의 output은 "sample.value"가 되겠습니다. 자 그럼 쉽게 bind의 의미를 아실 수 있을 겁니다.
bind function은 local variable이 어떤 함수에 의해 변경되는 사고(?)를 예방할 수 있다는 점에서 아주 유용한 함수입니다.
Posted by 이창명