생활코딩

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. dj_yang
    this 라는 것이 메소드가 소속된 객체를 가르키는 것으로 알고 있습니다.
    그렇다면 함수 또한 객체이기 때문에
    함수 a(){
    함수 b(){
    this
    }
    }
    로 표현을 하게 된다면 a 를 가르켜야하는 것 아닌가요? 실제로 실행을 해보니 b를 가르키고 있어서요.
  3. 라라라
    자바스크립트 자유민주주의 ㅋㅋㅋㅋㅋ
    김연아 같다는 것도 웃기고ㅋㅋㅋ
    공부는 어렵지만 댓글은 재밌어요 ㅋㅋ
  4. 코드잉
    코딩이 좋아 공부는 하겠다만 자바스크립트는 뭔가 좀 체계가 없고 구질구질하고 더럽고 지저분한 언어가틈
  5. 나마스때
    음 뭐랄까 좀 다른 엄격한 타입 언어에 비해서 좀 족같네요
    과도한 자유가 뒤통수치는 위험으로 다가올수도
  6. 코딩가즈아
    함수도 객체다! 이제야 수긍이 되네요! 정말 깔끔한 설명 감사합니다!
  7. 감사합니다!
  8. 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/>");
  9. heroyooi
    this는 변화무쌍하다. 함수가 누구의 소속이냐에 따라서 this의 값은 객체를 가리킨다.
  10. madnomad
    this 넘나 거시기한 것...
  11. this..쉬운듯 어려운듯.. 하지만 잘쓰고 있다는 ^^
  12. 이민형
    apply 함수로 this까지 결정할 수 있다는 게 충격적이네요
  13. 김진홍
    감사합니다!
  14. 박인호
    12-19
    수강 완료.
    this는 결국 해당 메소드를 포함하고 있는 객체를 가리킨다는 것이 모든것을 관통하는 의미라고 볼 수 있겠네요.
  15. Jupi
    여러번 댓글로 적었지만..
    기냥 함수가 갑자기 객체의 메소드가 될수 있도록 할 수도 있고,

    거기 함수에 있던 this도 소속 객체가 달라짐에 따라, 가리키는 것이 달라진다는 것이 너무나
    자유분방해 보이네요.. ㅎㅎ
  16. 고스트프리
    근데 call은 왜 안해주시나요? ㅎㅎ
  17. 고스트프리
    한번 더 봐야겠네요^^
  18. 힝히리힝힝
    머리가 안좋아서 이해하는데 2번이나 읽어야 했당..
  19. 수복
    감사합니더.
  20. 박동연
    깔끔한 정리네요. 감사합니다.
    대화보기
    • 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
          이제 확실히 알것 같네요. 감사합니다
        • 취준생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가 된다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기