콘텍스트

자바스크립트에서 작성하는 코드는 어떤 형태로든 항상 콘텍스트(그 속에서 코드가 돌아가는 객체)에 속하게 된다.

콘텍스트라는 개념은 다른 객체지향언어에도 있지만 자바스크립트의 콘텍스트만큼 극단적인 모습은 아니다.

콘텍스트는 this 변수를 통해 작동한다.

this 변수는 항상 코드가 속한 객체를 가리킨다.

한 콘텍스트 안에서 함수를 사용한 후 콘텍스트를 다른 변수로 바꾸는 예

var obj = {

yes : function(){

// this == obj

this.val = true;

},

no : function (){

this.val = false;

}

};

// obj 객체에 val 이라는 프로퍼티는 없다.

alert ( obj.val == null );

// yes 함수를 호출하면 obj 객체와 연결된 val 프로퍼티의 값이 바뀐다.

obj.yes();

alert( obj.val == true );

한 콘텍스트 안에서 함수를 사용한 후 콘텍스트를 다른 변수로 바꾸는 예

window.no = obj.no;

window.no();

// obj 객체는 그대로 있고

alert( obj.val == true );

// window의 val 프로퍼티 값이 바뀌었다.

alert( window.val == false );

obj.no 메서드의 콘텍스트를 window 변수로 바꾸는 것이 성가시다고 느낄 수도 있는데,

다행히도 자바스크립트에는 쉽게 콘텍스트를 바꾸는 메서드가 있다.

함수 콘텍스트를 바꾸는 예

function changeColor( color ){

this.style.color = color;

}

// window 객체에는 style 객체가 존재하지 않으므로 호출 실패

changeColor( "white" );

var main = document.getElementById("main");

changeColor.call( main, "black" );

function setBodyColor(){

changeColor.apply( document.body, arguments );

}

setBodyColor( "black" );