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. 홍주호
    20191102 완료
  2. 박창신
    완료
  3. 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는 여러 맥락에서 다른 의미로 쓰이지만 하나의 원리는 함수 내에서 함수를 감싸는 함수가 소속된 객체를
                  의미한다는 것이다.
                  이런 점을 봤을 때 자바스크립트는 매우 유연하지만 때론 혼란스러운 언어이다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기