JavaScript this

2016.04.23.

- this

this는 함수 내에서 함수 호출 맥락 (context)를 의미한다. 이는 상황에 따라서 의미가 달라질수 있다는 뜻인데 함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라진다는 뜻이다.

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

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

객체의 소속인 메소드의 this는 그 객체를 가르킨다. 고로 결과값은 o===this가 출력된다.

- 생성자의 호출

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

위 코드에서 함수로 호출했을 떄와 new를 이용해서 생성자로 호출했을 때의 차이를 알수있는데 함수로 호출했을 경우에는 window 를 가르킨다. 또한 생성자로 호출한 경우에는 o2 를 출력한다.

생성자는 빈객체를 만드는데 이 객체 안에서의 this는 만들어진 객체를 가르킨다.

- apply, call

함수는 apply와 call이라는 메소드를 가지고있는데 이 메소드로 this의 값을 제어할수있다.

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

첫번째 func()의 경우 window 를 출력하고

두번째의 func.apply(o)의 경우에는 case가 o 이므로 첫번째 switch문을 실행한다.

새번째의 func.apply(p)의 경우에도 case가 p 이므로 두번째 switch문을 실행한다.