[생활코딩] JavaScript 객체지향 : this

 

this

 

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

 

1. 함수 호출 시 : 전역객체 window

function func(){ 
    if(window === this){ 
        console.log("window === this"); 
    } 
} 
func();  
// window === this

2. 객체 소속인 메소드 호출 시 : 부모 객체

var o = { 
    func : function(){ 
        if(o === this){ 
            console.log("o === this"); 
        } 
    } 
} 
o.func();    
// o === this 

3. new를 이용한 생성자 호출 시 : 생성되는 객체

생성자는 빈 객체를 만든다. 그리고 이 객체 내에서 this는 만들어진 객체를 가르킨다.
생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 

this가 아니면 객체에 대한 어떠한 작업을 할 수 없다.

var funcThis = null;  
  
function Func(){ 
    funcThis = this; 
} 
var o1 = Func(); 
if(funcThis === window){ 
    console.log('window'); // window 
} 
  
var o2 = new Func(); 
if(funcThis === o2){ 
    console.log('o2'); // o2  
} 

4. 함수 메소드 apply와 call을 이용할 때

 

apply와 call이 this의 값을 제어할 수 있고, 메소드의 첫번째 인자가 this가 된다

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

객체는 주인이고 메소드는 노예와 같다.
메소드인 함수 역시 주인인 객체가 누구냐에 따라 소속이 달라진다.


★ this는 변화무쌍하지만 공통적으로 함수가 누구의 소속이냐에 따라 this는 그 소속 객체을 가리킨다