This는 무얼 가르킬까?

This

this는 키워드 뜻이 매우 다양하다.
함수에 쓰인 위치에 따라 다른 뜻을 가지는데 아래를 살펴보자.

1. this는 일반적으로 window 객체(global object) 를 가르킨다.

2. use strict 모드에서는 일반함수 내에서 this를 사용하면 undefined가 된다.

3. 객체 내 함수안에서 사용하면 그 함수를 가지고 있는 객체를 뜻함.

   const obj = {
     data: "data",
     fn: function () {
       console.log(this);
     },
   };
   
   obj.fn(); // obj 자체가 보임.
   

4. 객체를 만들어주는 함수를 생성자(constructor)라고 하며, 생성자 안에서 this는 새롭게 생성되는 객체(instance)가 된다.

   function 기계() {
     this.이름 = "커피";
   }
   
   const 오브젝트 = new 기계();
   

5. addEventListener의 콜백함수인 이벤트리스너 안에서의 this는 event.currentTarget을 가르킨다.

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

참고

https://codingapple.com/unit/es6-1-this-keyword-object/?id=2447
https://codingapple.com/unit/es6-2-eventlistener-constructor-this/?id=2447