JavaScript

this

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

함수호출

함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다.

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

결과 

window === this

메소드의 호출

객체의 소속인 메소드의 this는 그 객체를 가르킨다. 

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

결과

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

결과

window 
o2 

생성자는 빈 객체를 만든다. 그리고 이 객체내에서 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);

결과

window
o
p

댓글

댓글 본문
작성자
비밀번호
  1. gamza
    시간이 많이 지났으므로 이미 답을 찾았을거라 생각됩니다만..대댓달아봅니다.
    저도 혹시 그런가 싶어 확인해보았습니다.
    function func1(){}
    var obj1 = new func1();
    obj1.func2 = function(){
    if(window === this){
    console.log("window === this");
    }else if(obj1 === this){
    console.log("obj1 === this");
    }
    }
    obj1.func2();
    결과는 obj1 === this로 나오는데
    말씀하신 부분에 대한 답인지는 잘 모르겠네요
    제 결론은 this를 품은 내부함수가, 객체 안에있다면 해당 객체를 가리키게 된다. 입니다.
    함수 안의 내부함수라면 당연히 가장 가까이 있는 객체인 window를 가리키게 되구요
    대화보기
    • 좋은 강의 감사합니다. ^^
    • 완료!
      완료! 감사합니다~
    • 이제 확실히 알것 같네요. 감사합니다
    • 취준생1
      생성자를 통해 만들어진 객체에서의 this 는 그 만들어진 객체 자신을 가리킨다.
      함수에서의 this는 그 함수가 속한 객체를 가리킨다.
    • Daehyeop Ko
      반복해서 듣고 이해했습니다. 감사해요!
    • yihsang
      함수안에서 this란 키워드는 그 함수가 소속되어있는 객체를 가르킨다.
      감사합니다.
    • 구블리
      좀 이해가 어려워서 반복해서 들으니 이해가 되네요
      감사합니다:)
    • 박고잉
      전 연재 인줄;;
      대화보기
      • fasdgoc
        생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킨다
      • 이주환
        2016. 04. 25
        this는 자주사용해서 제대로 이해하고가면 좋은것 같습니다.
      • JustStudy
        어려웤던 것이 재미있어집니다.
        정말 정말 훌륭한 강의입니다.
        고맙습니다.
      • 초보웹 개발자
        강의 내용을 토대로 this를 이렇게 정의하니 이제야 이해가 되는듯 합니다..
        var obj = { // 객체
        met : function(){ // 메소드
        if(obj === this){
        console.log("obj === this");
        }
        }
        }
        obj.met();
        met()를 호출하였을때 met()라는 method의 객체는 obj 이므로 this는 obj가 된다.
      • 나제왕
        내부 함수에서 this를 사용할 때 주의해야 합니다. 실행결과가 예측했던 것과 다르게 출력된 이유는 JavaScript에서는 내부 함수 호출 패턴을 정의해 놓지 않기 때문입니다. 내부 함수도 결국 함수이므로 이를 호출할 때는 함수 호출로 취급되어 함수 호출 패턴 규칙에 따라 내부 함수의 this는 전역 객체를 참조하게 됩니다.
        즉. 내부함수 this는 전역 window를 가르킨다. 맞나요?

        지금 테스트 중인데 맞는거 같은데.
        저 사건이 맞다면 제가 테스트 중인 코드에서 이해할 수 없는 부분이 풀리거든요.
      • SK Kim
        this도 다시 돌아와서 봐야 할듯.
        일단 this는 함수가 소속된 곳이다..정도로 생각하고 넘어갑니다..ㅠㅠ
      • WayneKing
        김연아님 인줄... 엄청 유연하네요.
      • 이용주
        직접 예제를 따라해보니 이제야 이해가 되는군요 ㅋㅋㅋ 저는 this의 의미를 계속 찾아 보다가 여기서 확실히 알아복 갑니다. ^^
      • pupu
        좋은 내용 잘들었습니다.
      • 코코마
        좋은 강의 잘 보고 있습니다.


        본문에서

        '가르키다' 로 쓰인 3곳을 '가리키다' 로 고쳐야 할 것 같습니다.


        (JavaScript 만쉐~! ㅋ)
      • 규빈이아빠
        감사하네요~~
      • 조신부리
        감사합니다
      • 내머리가나쁜건가
        겁나 어렵네...

        프로그래밍 처음 공부하는데

        ㅋㅋ 그 단원 단원은 이해 되는데

        큰 그림에 전부 안들어가서 혼란스럽네요 ㅠㅠㅠ
      • Gyeongsu Bak
        3번 동영상 넘버가 잘못 되었네요
        3/4 -> 3/5
      • 샤핀
        자바가 익숙해서 그런지 javascript 개념이 더 어렵게 느껴지네요 ^^;;
      • egoing
        이해가 안된다기 보다는 공감이 잘 안되실 것 같습니다. 객체지향의 핵심은 객체라는 단단한 테두리 안에 서로 연관된 메소드와 변수를 모아서 정리하는 것이라고 할 수 있습니다. 그리고 일반적인 객체지향 언어는 객체에 메소드가 견고하게 종속되어서 하나의 메소드는 다른 객체의 소속이 절대 될 수 없습니다. 자바스립트의 apply는 바로 이런 점에서 메소드와 객체의 관계를 수평적으로 만들어줍니다. 지금 궁금해하시는 부분은 다른 객체지향 언어를 살펴보시면 그 때 비로소 자바스크립트 객체지향의 유연함에 대해서 공감할 수 있을 것 같습니다.
        대화보기
        • 망고레
          '함수의 호출' 편에서 질문을 드렸었는데, 이쪽으로 안내를 해주셨네요. 감사합니다.
          apply가 this의 값을 제어한다는 건 이해를 하겠습니다만..
          바로위의 코드를 예로 들자면, func 정의를 function func (thisObj){} 와 같이 인수로 보내고 switch(thisObj)한다면,
          func (window), func(o), func(p) 모두 같은 결과를 볼 수 있을텐데요, 이 부분 때문에 apply를 왜 써야 하는지, 어떤 장점이 있는건지 아직 잘 이해가 안갑니다. 그냥 코딩스타일의 차이일 뿐인건지, 아니면 특별한 장점 (가령 퍼포먼스가 더 좋아진다던지..)이 있는건지요?
        • 나무마루
          this에 대해 알게 되었네요.
        • egoing
          수정했습니다. ^^
          대화보기
          • Seon Hong Kim
            </br>
            br테그 반닫힘이 아닌 완전 닫힘으로 잘못 표기된 부분이 있습니다. ㅎㅎㅎ
          • marcia
            자바와 많이 혼동되어 어렵게 느껴졌는데 점점 정리가 되는 것 같습니다. 감사합니다~
          • ssong
            그런 차이가 있군요!! ㅎㅎ
          • Daniel
            잘 봤습니다. 정말 수고 많으시네요 ^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기