JavaScript ES6 문법 - this

박재휘·2024년 2월 17일

JavaScript

목록 보기

2/19

this

개발하면서 은근 자주 볼 수 있는 this는 사용하는 환경에 따라 각각 다른 뜻을 가지고 있다. 한 번 알아보도록 하자.

1. 그냥 썼을때

그냥 <script> 태그 안에 this를 쓰거나 일반 함수 내에서 this 를 출력해보면 window객체가 출력된다.

    <script>
      console.log(this);
      function whatIsThis() {
        console.log(this);
      }
      whatIsThis();
    </script>

window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다.

2. Object 내 함수에서

Object안의 함수에서 this 는 함수를 담고 있는 Object를 뜻한다.

    <script>
      var 오브젝트 = {
        data: "Kim",
        objFunction: function () {
          console.log(this);
        },
      };

      오브젝트.objFunction();
    </script>

arrow function 에서

()=>{} 안에서 this가 쓰인다면 거기에 맞는 this값이 아니라 외부의this값을 그대로 재사용한다.

1, 2번은 같은 개념이다

헷갈릴 필요 없이 이 문장만 기억하면 된다.

this는 오브젝트 내의 함수에서 사용했을 때 함수를 담고있는 오브젝트를 출력한다.

this는 오브젝트 내의 함수에서 사용했을 때 함수를 담고있는 오브젝트를 출력해준다고 했는데 1번에 script태그 내 쓰이는 코드들은 사실 window객체안에 쓰이는 것이기 때문에 1번에서는 함수를 담고있는 객체인 window가 출력되는 것이다.

3. constructor 에서

function cons(){
  this.이름 = 'Kim';
}

여기서 this는 cons로부터 새로 생성될 오브젝트들을 의미한다.

위 코드의 뜻은 새로 생성되는 오브젝트의 이름 key값에 'Kim' 이라는 값을 넣으라는 뜻이다.

4. eventlistener 에서

  <body>
    <button id="btn">this is 버튼</button>
    <script>
      document.getElementById("btn").addEventListener("click", function (e) {
        console.log(this);
      });
    </script>
  </body>