생활코딩

Coding Everybody

코스 전체목록

닫기

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. 호두
    고맙습니다
  2. 호두
    20190211, 글
  3. dj_yang
    지속적인 댓글 너무 감사합니다.

    따로 전체 코드는 없고 그냥 함수 안에 함수 넣고 그 안에서 this가 어떤 값을 가르키는 지 확인해보았더니 b를 가르키더라구요. 근데 제가 이해한 강의 내용이라면 a 를 가르키는 게 맞지 않나 싶어 댓글을 남기게 되었습니다.

    사실 강의 들은적이 너무 오래되어 내용이 잘 기억안나기는 합니다.
    대화보기
    • Rock Heung
      전체 코드를 적어주시면 판단이 될거 같은데, 말씀하셨던
      function a() {
      function b() {
      this;
      }
      }
      와 같은 코드는 this가 전역 객체를 가리킵니다. 어떤 상황에서 this가 b를 가리킨다는 말씀이시죠?
      여기서 b는 a의 로컬 함수일뿐 어디에도 속해있지 않고 전역 객체가 아닌 어떤 객체의 메소드도 될 수 없습니다.
      대화보기
      • reply_dj_yang
        예리하시네요
      • dj_yang
        b를 a의 메소드로 보고 있다는 말씀이신가요?
        대화보기
        • Rock Heung
          b함수가 a함수 내에 정의되었을 뿐 소속된 상태는 아니어서 그런거 같네요.
          소속된 상태라면 a.b()와 같은 dot 노테이션으로 접근할 수 있어야 하지 않을까요?
          대화보기
          • 감사합니다.
          • 미완성
            20190109
          • 스탐
            감사합니다.
          • dj_yang
            this 라는 것이 메소드가 소속된 객체를 가르키는 것으로 알고 있습니다.
            그렇다면 함수 또한 객체이기 때문에
            함수 a(){
            함수 b(){
            this
            }
            }
            로 표현을 하게 된다면 a 를 가르켜야하는 것 아닌가요? 실제로 실행을 해보니 b를 가르키고 있어서요.
          • 라라라
            자바스크립트 자유민주주의 ㅋㅋㅋㅋㅋ
            김연아 같다는 것도 웃기고ㅋㅋㅋ
            공부는 어렵지만 댓글은 재밌어요 ㅋㅋ
          • 코드잉
            코딩이 좋아 공부는 하겠다만 자바스크립트는 뭔가 좀 체계가 없고 구질구질하고 더럽고 지저분한 언어가틈
          • 나마스때
            음 뭐랄까 좀 다른 엄격한 타입 언어에 비해서 좀 족같네요
            과도한 자유가 뒤통수치는 위험으로 다가올수도
          • 코딩가즈아
            함수도 객체다! 이제야 수긍이 되네요! 정말 깔끔한 설명 감사합니다!
          • 감사합니다!
          • seeyoung
            var funcThis = null;

            function Func(){
            funcThis = this;
            }

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


            if(window === funcThis) document.write("window === funcThis <br/>");

            if(window.funcThis === funcThis) document.write("window.funcThis === funcThis <br/>");


            if(window.funcThis === funcThis.funcThis) document.write("window.funcThis === funcThis.funcThis <br/>");


            var o2 = new Func();
            if(funcThis === o2){
            document.write('o2 <br />');
            }
            console.log(o2);
            if(funcThis.o1 === o1) document.write("funcThis.o1 === o1 <br/>");
            if(funcThis.o2 === o1) document.write("funcThis.o2 === o1 <br/>");
            if(o1 === undefined) document.write("o1 === undefined <br/>");
            if(funcThis.o2 === undefined) document.write("funcThis.o2 === undefined <br/>");
            if(o2 != o1) document.write("o2 != o1 <br/>");


            if(funcThis === window) document.write("funcThis === window <br/>");

            if(window === funcThis) document.write("window === funcThis <br/>");

            if(window.funcThis === funcThis) document.write("window.funcThis === funcThis <br/>");


            if(window.funcThis === funcThis.funcThis) document.write("window.funcThis === funcThis.funcThis <br/>");
          • heroyooi
            this는 변화무쌍하다. 함수가 누구의 소속이냐에 따라서 this의 값은 객체를 가리킨다.
          • madnomad
            this 넘나 거시기한 것...
          • this..쉬운듯 어려운듯.. 하지만 잘쓰고 있다는 ^^
          • 이민형
            apply 함수로 this까지 결정할 수 있다는 게 충격적이네요
          • 김진홍
            감사합니다!
          • 박인호
            12-19
            수강 완료.
            this는 결국 해당 메소드를 포함하고 있는 객체를 가리킨다는 것이 모든것을 관통하는 의미라고 볼 수 있겠네요.
          • Jupi
            여러번 댓글로 적었지만..
            기냥 함수가 갑자기 객체의 메소드가 될수 있도록 할 수도 있고,

            거기 함수에 있던 this도 소속 객체가 달라짐에 따라, 가리키는 것이 달라진다는 것이 너무나
            자유분방해 보이네요.. ㅎㅎ
          • 고스트프리
            근데 call은 왜 안해주시나요? ㅎㅎ
          • 고스트프리
            한번 더 봐야겠네요^^
          • 힝히리힝힝
            머리가 안좋아서 이해하는데 2번이나 읽어야 했당..
          • 수복
            감사합니더.
          • 박동연
            깔끔한 정리네요. 감사합니다.
            대화보기
            • GoldPenguin
              완료했습니다.
            • GoldPenguin
              완료했습니다.
            • 이승우
              2017/08/06 완료
            • EGOIN
              잘 이해되지 않지만 좋은 강의 보여주셔서 감사합니다
              더욱 노력하겠습니다!!
            • 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
              감사합니다.
            • 밤덕이
              강.의.좋.아.
            • BANIP
              한 세번정도 반복해서 들어도 원리가 이해가 잘 안되네요 힝 암기해서 뇌를 혹사시킬수 밖에 없겠어요

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

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