[JavaScript/Tutorial] Closure 와 Function.bind 의 사용.

Closure와 Function.bind 의 사용

이미지 출처 : www.kabayview.com

[이전강좌] Scope. var 없이 변수 정의하면? Global variable 접근방법은?

Closure

Closure 는 Scope 의 확장판으로 이해할 수 있다.

Function 에 Parameter 형태로 Variable 을 전달하여, 해당 변수를 Local 화 시키는 것도 Closure이고,

Outer scope 접속을 위해 임의의 variable 에 this 를 저장한 후, sub procedure 를 실행하는 형태도 Closure 하고 한다.

// 변수 로컬화 closure

var localizeFunction = function( localizedIndex ){

return function(){

alert( localizedIndex );

};

}

for( var i=0; i < 5; i++ ){

setTimeout( localizeFunction( i ), i*100 );

}

// this 저장 closure

var outerObj = {

name: "outerObj",

outerFunc: function{

var self = this;

var innerObj = {

name: "innerObj"

innerFunc: function(){

console.log( self.name, this.name ); // outer inner

}

}l

};

};

Function.bind

Function.bind 는 Closure 와 거의 같은 기능이다.

하지만, 때때로 closure 를 사용하는 것보다 Function.bind 를 사용하는 것이 scope traversal 을 피할 수 있어 결론적으로 오버헤드를 줄일 수 있다.

Function.bind 는 새로운 함수를 만들어 내는데, 이 함수를 call 하면 전달된 context 에서 해당 function을 수행한다.

Function.bind 는 ECMAScript 5 부터 추가되어 모든 브라우저가 지원 안 할 수 있다. 

이 때는 MDN 에서 제공하는 대체 코드를 이용하면 된다.

var name = "akson";

var module = {

getName: function(){

return this.name;

},

name : "mommy"

};

 

module.getName(); // mommy

var getName = module.getName;

getName(); // akson

 

var boundGetName = getName.bind( module );

boundGetName(); // mommy

bind function, closure, ECMAScript, Example, example code, function, function.bind, javascript, javascript tutorial, js, js tutorial, localize, mdn, outer scope, parameter, sample, Scope, scope traversal, This, tutorial, variable, 강좌, 기초 강좌, 지역변수