웹 프로그램

코스 전체목록

닫기

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. choi
    완료
  3. labis98
    20210822 good~~~!!!
  4. JustStudy
    정말 몇 년 뒤에 봐도 이고잉님의 강의는 명강의
  5. 드림보이
    수강완료했습니다...
  6. 낭만고양이
    수강완료
  7. Amousk
    좋은 강의 감사합니다.
  8. hanel_
    21.2.27 항상 감사드립니다
  9. this는 상위 객체를 가르킨다. apply, call을 활용해 제어가가 가능하다.
  10. 강승
    감사합니다.
  11. 박병진
    감사합니다.
  12. 이현진
    1.생성자내에서 this는 생성자가 만든 객체를 지칭한다.

    window내에서 this는 window, 생성자내에서의 this는 생성될 객체(호출후 객체생성)
    mothod 에서 this는 mothod 가 소속된 객체지칭한다.

    2. apply
    function sum(){} 함수리터럴,
    var o = {}, or new Object 객체리터럴
    var a = [1,2,3] , or new Array(1,2,3) 배열리터럴
    함수는 객체이고 함수가 가질 수 있는 propertiy 중에 apply이 있다.
    함수의 메소드인 apply, call을 이용하여 객체를 주입하면 this는 주입된 객체를 가리킨다.
  13. Jeongwon
    몇 주 전에 강의들을 때와 지금 받아들여지는 내용이 많이 달라서 신기합니다. 언제나 좋은 강의로 부족한 기초 지식을 메울 수 있어 다행입니다. 감사드려요 :)
  14. 코딩중독
    생성자와 this 편에 3/5인데 3/4라고 오타났네요ㅎㅎㅎ
  15. bomnie
    메소드가 객체에 강하게 종속되는 다른 객체 지향 언어와 달리
    자바스크립트에서의 함수는 매우 유연한데 함수를 어떻게 호출하느냐에 따라
    여러 객체에 각각 종속될 수 있으며 함수 자체로도 객체가 된다.

    함수가 누구의 소속이냐에 따라 this의 값은 달라진다. 변화무쌍한 this!
  16. bomnie
    함수를 호출하면 그 함수는 사실 윈도우라는 전역객체의 메소드이기 때문에 그 때의 this === window /
    new 키워드를 사용해서 생성자로 호출하면 자바스크립트는 내부적으로 비어있는 객체를 만들고 그 비어있는 객체 === 생성자 안에서의 this
  17. ironia
    윈도우 의 메소드로. func()로 속하게 되어 있는데... window랑 같을 수가 없어서 인 것 같습니다^^;;
  18. 또또
    생성자의 호출 예제에서
    변수 o1은 결국 function Func(){null}로 정의되어서 전역 객체인 window와 일치한다는 결과가 나온 것으로 생각하면 되나요?
    Func() === window를 실행하면 결과 값은 false인데,
    왜 window와 같다고 볼 수 있는지 잘 모르겠습니다..
  19. 한강
    좋은 감의 감사합니다. ^^! 200327
  20. moleskindiary@gmail.com
    감사합니다.
  21. 굼벵이
    완료
  22. 없으면안돼요
    20191212 완료
  23. 홍주호
    20191102 완료
  24. 박창신
    완료
  25. 욱9
    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 노테이션으로 접근할 수 있어야 하지 않을까요?
            대화보기
            • choon
              감사합니다.
            • 미완성
              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는 결국 해당 메소드를 포함하고 있는 객체를 가리킨다는 것이 모든것을 관통하는 의미라고 볼 수 있겠네요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기