Javascript

this 객체의 메소드 호출과 생성자 호출

HJdone 2019. 6. 6. 17:25

this는 함수 내에서 함수 호출 맥락을 의미한다.즉.함수를 어떻게 사용하느냐에 따라서 달라진다는 의미인데 함수와 객체의 관계가 느슨한 자바스크립트에서는 this가 이 둘을 연결 시켜주는 실질적인 역할을 한다.

 

함수에서의 this는 전역객체와 같은데 이를 설명하는 대표적인 예시코드를 살펴보도록 하자.

function func(){
	if(window === this) {
    	document.write("window === this");
        	}
}
func();

this의 값은 전역객체인 window와 같다.

 

그럼이제 this의 메소드호출에 대해서 살펴보자. 

var b = { 
	func : function() {
    if( b === this) {
    document.write("b === this");
    	}
       }
    }
b.func();

위의 코드에서 알아 볼수 있는 사실은 객체의 소속인 메소드는 this그 객체를 가르킨다는거다.

쉽게 말해서 만약 어떠한 메소드를 호출했다면 그객체의 값을 this가 가리킨다는 말이다.

 

그렇다면 생성자의 호출은 어떻게 할까?

 

방법은 간단하다. 생성자의 호출을 이해하기위해서 new라는 연산자를 이용해서 생성자를 호출했을 때와 차이점을 

살펴보도록 하자.

var funcfunc = null;

function Func() {
	funcfunc = this;
}
var o1 = func();
if(funcfunc === window) {
	document.write('window <br />');
}

var o2 = new func();
if(functhis === o2) {
	document.write('o2<br />');
}

생성자는 빈 객체를 만들고 이객체내에서 this는 만들어진 객체를 가리킨다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업도 할 수 없다.

 

마지막으로 값을 제어할 수 있는 apply()call()라는 함수메서드에 대해서 함께 살펴보도록 하자.

var a = {}
var p = {}
function func(){
	switch(this){
    	case a:
        	document.write('a<br />'):
        	break;
        case b:
        	document.write('b<br />'):
        	break;
        case window:
        	document.write('window<br />'):
        	break;
}
func();
func.apply(a);
func.apply(b);
       

이렇게 객체라는것과 함수는 대등한 관계라는 것을 알 수가 있다.즉,

함수를 어떻게 호출하느냐에 따라서 다른객체가 될 수 있다는 것이다.이러한 사실에 근거하여

함수는 어떠한 객체에 종속된다고 볼 수도 있다.