context binding

자바스크립트에서 모든 메서드(함수)와 변수는 컨텍스트를 가진다.
컨텍스트는 메서드와 변수가 속해 있는 객체를 가리킨다고 생각하면 될듯하다.
예를들면,

function test(){

  alert('test');

} 

test()의 컨텍스트는? BOM(Browser Object Model)의 전역객체인 window다. 객체의 컨텍스트에는 this 키워드를 통해서 접근할 수 있는데, 다음 코드를 보면 쉽게 이해가 된다.

function test(){

//여기서 this 는 브라우져 전역 객체 window를 가리킨다.

  for( var name in this){

    alert(name + ':' + this[name]);

  }
}



//호출하게되면 window객체의 모든 프로퍼티가 출력된다.

test();

test()를 실행하게되면 this는 전역 객체인 window를 가리키게되고 window 객체의 프로퍼티들을 뱉어내기 시작할 것이다. 다음 코드를 하나 더 보자.

var obj = {

  property1 : 'property1',

  property2 : 'property2',

  method : function(){

    for(var name in this){

      alert(name +':'+ this[name]);

    }

  }

}

obj.method();

obj.method()를 실행하게되면 obj객체의 property1, property2, method() 내용을 출력할것이다. JAVA에 익숙한 프로그래머라면 this 란 키워드가 디자인타임에 객체 자신을 가리키는 것처럼 생각될 수도 있겠지만, 자바스크립트에서는 함수의 컨텍스트가 런타임에 바인딩된다는 것에 유념하여야한다. 언뜻 비슷해 보일 수 도 있지만, 다음의 두 함수 call() 과 apply()의 동작을 살펴보면 명확해 진다.

자바스크립트의 모든 메서드는 call() 과 apply()를 가진다.  이 두 함수는 실행 시점에 객체의 컨텍스트를 선택할 수 있는데, 이를 컨텍스트 바인딩(context binding)이라고 한다. call()과 apply()의 차이는 매개변수를 넘기느냐 아니냐의 차이일뿐 동작은 동일하다.

test.call(obj); // obj객체의 프로퍼티가 출력

obj.method.call(window); // window 객체의 프로퍼티가 출력

test() 함수에서 this는 window객체를 가리키는 것 처럼 보인다. 하지만 call()에 의해 함수내의 this가 인자인 obj로 변경되게된다. 즉, 실행시점에 컨텍스트 바인딩이 일어나는것을 확인 할 수 있다.
다음 코드는 apply()를 이용한 유용한 예제이다.

var max = Math.max(1,2,3,4,5); //Math.max()는 인자값중 가장 큰 값를 반환하는 기본 메서드이다.

alter(max); // 5


//다음과 같은 배열에서 Math.max()를 이용해서 가장 큰 값을 출력하려면 어떻게 해야할까?

var arr[1,2,3,4,5];


var max = Math.max.apply(Math,arry); 

//Math.max의 컨텍스트는 변경하지 않아도 Math 이지만 지금 apply()를 사용하는 이유는 

//컨텍스트를 변경하는기 위한 것이 아니라 배열을 인자로 전달하기 위해서이다.