Javascript this

 

 

this

 

 

• this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다.
• 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

 

 

 

 

함수 호출

 

 

 

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

 

• 위의 코드와 결과를 보면 func() 함수 안의 this는 func() 함수의 전역객체인 window인 것을 확인 할 수있다.

 

 

 

 

 

 

 

 

 

메소드의 호출

 

 

 

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

• 위 코드와 결과를 보면 객체의 소속인 메소드 안의 this는 그 소속한 객체를 가르키는 것을 확인 할 수있다.

 

 

 

 

 

 

 

 

 

 

생성자의 호출

 

 

 

 

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

• 여기서 funcThis = this;는 var이 앞에 붙어있지 않아 함수 안의 전역변수로서 밖에 존재하는 전역변수 var funcThis = null;을 가르킵니다. 즉 null로 funcThis 값을 정의해주는 역할을 합니다.
• 생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킨다. 즉 함수로 호출된 this는 window을 가리키고 생성자로 호출된 this는 생성될 객체인 o2을 가리키는 것을 알 수 있다.
• 또 위의 코드 중 아래 쪽에 위치하여 순서상 생성자가 실행되기 않는다면 생성자가 실행 되지 않았으므로 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없다. 즉 생성자보다 위 쪽에 위치한 function Func() 함수안에 if(o2==this){}을 넣어도 아직 o2가생성된 객체에 할당되지 않은 때여서 성립되지 않는다.

 

 

 

 

function Func(){
    document.write(o);
}
var o = new Func();

확실히 this가 없으니 o변수가 아직 새로 생성된 객체에 할당되지 않은 것을 확인 가능하다.

 

 

 

 

 

 

 

 

 

apply, call

 

 

 

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

• 위의 코드와 결과를 보면 함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있다는 것을 확인 할 수 있다. 
• 함수 밖에 있는 객체를 this을 이용하여 가져오는 것을 확인 할 수있다. (원래는 객체 안에 함수가 있어야 관계성립이 가능하다.)
• 함수는 객체이고 함수가 가질 수 있는 프로퍼티(propertiy) 중에 apply가 있다고 생각하면 된다.
• 위 코드에서 볼 수 있는 function sum(){}의 방식은 함수리터럴이라 불린다.
• - function sum(){} : 함수리터럴,
  - var o = {}, or new Object : 객체리터럴
  - var a = [1,2,3] , or new Array(1,2,3) : 배열리터럴