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. Seo Yun Seok Tudoistube
    생성자가 실행되기 전까지는 객체는 변수에도 할당이 될 수 없다는 설명을 보고
    앞장에서 나온 예제코드의 결과가 window 로 나온다는 것은 할당이 안되서인지
    궁금합니다.

    var funcThis = null;

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

    혹시, 아시는 분 계시면 가르쳐주세요.
    감사합니다^_____^!!!
  2. kshwan1023
    재밌네요.. 어렵지만.. 감사합니다.
  3. illliilllliillliii
    apply에 대한 비유 넘 웃퍼요 ㅜㅜㅋㅋ
  4. 윤제현
    apply 라는 것에 대해 흥미를 느껴서 해봤습니다
    혹시나 o,p,func가 모두 global 객체의 밑에 있어서 apply가 가능한것이 아닐까? 하는 의문에서요
    var o = {}
    var p = {}
    var t = {
    func : function(){
    switch(this){
    case o:
    document.write('o<br />');
    break;
    case p:
    document.write('p<br />');
    break;
    case t:
    document.write('t<br />');
    break;
    case window:
    document.write('window<br />');
    break;
    }
    }
    }
    그러나 결과는 제 생각과는 달랐습니다
    func(); => 실행불가(당연하겠죠)
    t.func(); => t
    t.func.apply(o); => o
    t.func.apply(p); => p
    t.func.apply(window); => window

    그럼 apply는 어떤 상황에서 쓰면 좋은 걸까요?? 굳이 왜 apply 라는 함수가 필요한 걸까요?
    강의 정말 감사 드립니다
    재밌게 보고 있어요ㅎㅎ
  5. crable
    감사합니다.
  6. 밤덕이
    강.의.좋.아.
  7. 한 세번정도 반복해서 들어도 원리가 이해가 잘 안되네요 힝 암기해서 뇌를 혹사시킬수 밖에 없겠어요

    객체는 만들어져 있으나 할당이 되어잇지 않기 때문에 참조할 수 없음
    생성자를 붙이지 않은 함수는 window객체를 가리킴
    생성자 안의 this는 생성자가 만든 객체를 가리킴
    함수를 apply로 호출 시 어플라이 메소드의 첫번째 인자는 해당 객체의 this값이 됨
  8. 신입1
    이거 왜케웃김 ㅎㅎㅎㅎ
    대화보기
    • 신입1
      빅피처가 그려지는 설명 너무 감사합니다. 함수도 객체다!
    • Bridge
      생성자의 호출 동영상에서 유튜브의 제목이 (3/4) 로 잘못 표기 되어있는거 같습니다.

      (3/5)가 맞는거죠?
    • 폭스킴
      자바스크립트 자유민주주의~
    • 임지호
      this는 여러 맥락에서 다른 의미로 쓰이지만 하나의 원리는 함수 내에서 함수를 감싸는 함수가 소속된 객체를
      의미한다는 것이다.
      이런 점을 봤을 때 자바스크립트는 매우 유연하지만 때론 혼란스러운 언어이다.
    • 으아아아아아아너무 쉽다!
      재미있다! ㅡ아ㅡ아ㅡㅏ으ㅏㅇ아ㅏ앙ㅇ아ㅏㅇ 너무재밌어 나는 자바스크립트ㅏㄱ 너무좋ㅈ다 으ㅡ아으ㅏ아아!!!!!!!
    • 시간이 많이 지났으므로 이미 답을 찾았을거라 생각됩니다만..대댓달아봅니다.
      저도 혹시 그런가 싶어 확인해보았습니다.
      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 자세히 보기