[객체지향] this

 

 

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

---

 this 

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. (맥락 : 상황에 따라서 달라진다는 의미 )

this는 자바스크립트 함수 안에서 사용할 수 있는 일종의 약속된 변수이다.

즉, this에 대한 값은 함수를 어떻게 호출하냐에 따라 this가 가리키는 대상이 달라진다.

---

 함수 호출 

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

위 예제의 결과는 window === this 가 출력된다.

즉, this는 함수 안에서 전역객체인 window와 같다.

---

 메소드의 호출 

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

위 소스는 o라는 변수에 객체가 할당되었으며, 그 안에는 func라는 프로퍼티와 메소드가 있다.

위 예제의 결과는 o === this 가 출력된다.

 

즉, 어떤 객체에 대한 메소드를 호출하면 메소드가 소속되어 있는 객체를 this로 접근할 수 있다.

---

 생성자의 호출 

함수 안에서 'this' 라는 키워드는 함수가 소속되어 있는 객체를 가르킨다.

 

예제를 통해서 알아보자.

아래 코드는 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이에 대한 것이다.

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 />');
}

 

생성자는 빈 객체를 만든다.

그리고 이 객체 내에서 this는 만들어진 객체를 가르킨다. 이것은 매우 중요한 사실이다.

 

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문이다. 

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

위 소스의 결과 값은 undefined가 출력된다.

 

---

 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);

switch는 조건문에 들어간 값과 일치하는 값의 case문이 실행된다.

그래서 func()는 window를 가르키므로 window값을 갖고 있는 case문이 출력된다.

 

apply()함수를 사용할 때는, 첫번째 인자에 함수 호출 context를 대입한다.

따라서 출력값은 순서대로 window, o, p가 출력된다.