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. Jupi
    여러번 댓글로 적었지만..
    기냥 함수가 갑자기 객체의 메소드가 될수 있도록 할 수도 있고,

    거기 함수에 있던 this도 소속 객체가 달라짐에 따라, 가리키는 것이 달라진다는 것이 너무나
    자유분방해 보이네요.. ㅎㅎ
  2. 고스트프리
    근데 call은 왜 안해주시나요? ㅎㅎ
  3. 고스트프리
    한번 더 봐야겠네요^^
  4. 힝히리힝힝
    머리가 안좋아서 이해하는데 2번이나 읽어야 했당..
  5. 수복
    감사합니더.
  6. 박동연
    깔끔한 정리네요. 감사합니다.
    대화보기
    • GoldPenguin
      완료했습니다.
    • GoldPenguin
      완료했습니다.
    • 이승우
      2017/08/06 완료
    • 잘 이해되지 않지만 좋은 강의 보여주셔서 감사합니다
      더욱 노력하겠습니다!!
    • Seo Yun Seok Tudoistube
      이 강좌에서 요점은 앞으로 자바스크립트 객체지향의 모든 부분에서 중요한 진수 중의 진수이겠네요.
      함수를 호출하면, 함수의 this 는 window 가 됨.
      생성자를 호출하면, 생성자의 this 는 생성자의 객체가 됨.
      함수의 메소드인 apply, call의 첫번째 인자가 Context 가 되어서, 이를 이용하면 this의 값을 제어할 수 있다.
      감사합니다^_____^!!!
    • kshwan1023
      재밌네요.. 어렵지만.. 감사합니다.
    • illliilllliillliii
      apply에 대한 비유 넘 웃퍼요 ㅜㅜㅋㅋ
    • 윤제현
      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 라는 함수가 필요한 걸까요?
      강의 정말 감사 드립니다
      재밌게 보고 있어요ㅎㅎ
    • crable
      감사합니다.
    • 밤덕이
      강.의.좋.아.
    • 한 세번정도 반복해서 들어도 원리가 이해가 잘 안되네요 힝 암기해서 뇌를 혹사시킬수 밖에 없겠어요

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

        (3/5)가 맞는거죠?
      • 폭스킴
        자바스크립트 자유민주주의~
      • 임지호
        this는 여러 맥락에서 다른 의미로 쓰이지만 하나의 원리는 함수 내에서 함수를 감싸는 함수가 소속된 객체를
        의미한다는 것이다.
        이런 점을 봤을 때 자바스크립트는 매우 유연하지만 때론 혼란스러운 언어이다.
      • 으아아아아아아너무 쉽다!
        재미있다! ㅡ아ㅡ아ㅡㅏ으ㅏㅇ아ㅏ앙ㅇ아ㅏㅇ 너무재밌어 나는 자바스크립트ㅏㄱ 너무좋ㅈ다 으ㅡ아으ㅏ아아!!!!!!!
      • 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를 가리키게 되구요
        대화보기
        • 좋은 강의 감사합니다. ^^
        • 완료!
          완료! 감사합니다~
        • hyuna
          이제 확실히 알것 같네요. 감사합니다
        • 취준생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
            현재 버전
            선택 버전
            graphittie 자세히 보기