콘텍스트: context - OOP JavaScript

from 프로자바스크립트테그닉

자바스크립트에서 여러분이 작성하는 코드는 어떤 형태로든 항상 콘텍스트(그 속에서 코드가 돌아가는 객체)에 속하게 된다. 콘텍스트라는 개념은 다른 객체지향 언어에도 있지만 자바스크립트의 콘텍스트만큼 극단적인 모습은 아니다.
콘텍스트는 this 변수를 통해 작동한다. this 변수는 항상 코드가 속한 객체를 가리킨다. 전역 변수들이 실제로는 window 객체의 프로퍼티임을 떠올려 보라. 이는 심지어 전역 콘텍스트에서도 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.no;
						window.no();

						// obj 객체는 그대로 있고
						// (콘텍스트가 window 객체로 바뀌었기 때문에),
						alert(obj.val == true);

						// window의 val 프로퍼티 값이 바뀌었다.
						alert(window.val == false);
						

상기의 코드에서 obj.no 메서드의 콘텍스트를 window 변수로 바꾸는 것이 성가시다고 느낄 수도 있다. 다행히도, 자바스크립트에는 이해하기 쉽고 사용하기 쉬운, 콘텍스트를 바꾸는 메서드가 몇 개 있다. 아래의 코드는 바로 이일을 하는데 사용할 수 있는 call과 apply 메서드를 보여준다.

테스트 테스트



함수 콘텍스트를 바꾸는 예

							// 자신의 콘텍스트 색을 변경하는 간단한 함수
							function changeColor (color) {
								this.style.color = color;
							}

							// window 객체에는 style 객체가 존재하지 않으므로
							// window 객체에 대고 호울하면 호출이 실패한다.
							changeColor("white");

							// ID가 main인 엘리먼트를 찾는다.
							var main = document.getElementById("main");

							// call 메서드를 사용해 검은색으로 바꾼다.
							// call 메서드는 첫 번째 전달인자를 콘텍스트로 설정하고
							// 나머지 전달인자를 함수의 전달인자로 넘긴다.
							changeColor.call(main, "black");
							
							// body 엘리먼트의 색을 설정하는 함수
							function setBodyColor () {
								// apply 메서드는 첫 번째 전달인자인 body 엘리먼트로
								// 콘텍스트를 설정한다. 전달인자 배열인 두 번째 전달인자는
								// 함수의 전달인자로 넘긴다.
								changeColor.apply(document.body, arguments);
							}

							// body 엘러먼트의 배경색을 검은색으로 설정한다.
							setBodyColor("black");