(Javascript) 자바스크립트 심화 (7) this !

안녕하세요~! 영감을 주는 개발자 방민방민입니다.

오늘은 자바스크립트에서 THIS 의 활용에 대해서 알아보고자 합니다.

'이것' 이라고 번역되는 this 는 하나이지만 어느위치에서 어떻게 쓰이느냐에 따라서 다양한 값을 가질 수 있습니다. 그렇기 때문에 이 this 에 대한 정확한 개념을 인지하고 가야만 합니다. 

지금부터 바로 this 에 대한 학습을 시작하도록 하겠습니다!!!

1. 함수 호출에서의 this !

기본적으로 this가 갖고있는값을 이해하기위하여 아래의 예제를 먼저 실행해 보겠습니다.

function func(){
	if(window === this){
		alert("window===this");
	}
}
func();

여기서 window 는 전역에 걸쳐 모든 변수와, 함수등을 속성으로 갖는 전역객체를 의미합니다.

만약 위의 함수에서 this 가 전역객체인 window 와 같다면 HTML 은 "window === this" 메시지를 출력할 것입니다. 결과는 아래와 같습니다.

이 예제를 통해 기본적인 함수 호출에서 this 는 전역 객체 window 의 값을 갖고 있다는 것을 확인 할 수 있습니다.

2. 메소드 호출에서의 this !

메소드 내부에서 호출되는 this 의 값을 알아보기 위해서 아래의 예제를 실행해 보겠습니다.

var o = {
	func : function(){
		if(o===this){
			alert("o===this");
		}
	}
}
o.func();

위의 예제는 아래의 결과를 출력합니다.

이경우의 this 는 소속되어있는 객체 o와 같은 값을 가지고 있습니다.

3. 생성자에서의 this !

생성자를 통해 새로운 객체를 만들게 되었을때는 this 가 어떤 의미를 가지게 될까요? 아래 예제를 보도록 하겠습니다.

var funcThis = null;

function Func(){
	funcThis = this;
}

var o1 = Func();
if(funcThis === window){
	alert("window");
}

var o2 = new Func();
if(funcThis===o2){
	alert("o2")
}

이 경우 알림창은 window 와 o2 를 모두 출력합니다. 위의 o1의 경우 new 없이 함수를 호출하여 funcThis에 this 를 넣은 형태이기 때문에 위에서 배운것처럼 함수호출에서의 경우 this 는 window 를 갖게 됩니다. 

o2 의 경우에는 Func()라는 함수를 new 를 통해 생성자로 사용하였고 이때, 생성자를 통해 새롭게 생성된 객체 내부에서 동작하는 this 는 위에 2번에서 배운것과 같이 소속된 객체 o2를 가르키게 됩니다.

오늘은 자바스크립트에서 동작하는 this 에 대하여 알아보았습니다.

this 는 마치 카멜레온처럼 그 위치가 어디에서 쓰이느냐에 따라 그 내용이 수시로 바뀝니다.

프로그래밍을 아주 유연하게 만들어주는 this 임에는 분명하지만 그 사용에 있어 아주 명확한 확신을 가져야할 필요가 있습니다.

지금까지 영감을 주는 개발자 방민방민이었습니다. 감사합니다 :)