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. var o2 = new Func(); 로 객체가 초기화되는 순간
    this가 생성자를 통해 만들어진 객체인 o2를 가리키고, 동시에 funcThis에 대입된다고 생각하시면 될 것 같아요.
    대화보기
    • 산호초
      3번째 강의 "생성자와 this"강의 중 의문점이 있습니다.

      생성자 안에서의 this는 아직 o2객체에 담기지 않은 시점에서의 객체를 가리킨다고 하셨는데요,

      그 상태로 funcThis에 대입되고, 그 이후에 생성 객체가 o2에 담긴다면 funcThis는 여전히 o2가 아닌 이전 상태의 객체를 가리켜야 하는게 아닌지 궁금합니다.
    • 두루뚜뚜
      또보러올께용
    • 호두
      고맙습니다
    • 호두
      20190211, 글
    • 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를 가르키고 있어서요.
            • 라라라
              자바스크립트 자유민주주의 ㅋㅋㅋㅋㅋ
              김연아 같다는 것도 웃기고ㅋㅋㅋ
              공부는 어렵지만 댓글은 재밌어요 ㅋㅋ
            • 코드잉
              코딩이 좋아 공부는 하겠다만 자바스크립트는 뭔가 좀 체계가 없고 구질구질하고 더럽고 지저분한 언어가틈
            • 나마스때
              음 뭐랄까 좀 다른 엄격한 타입 언어에 비해서 좀 족같네요
              과도한 자유가 뒤통수치는 위험으로 다가올수도
            • 코딩가즈아
              함수도 객체다! 이제야 수긍이 되네요! 정말 깔끔한 설명 감사합니다!
            • moon
              감사합니다!
            • 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를 가리키게 되구요
                  대화보기
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기