[코드잇 스프린트 풀스택 4기] 자바스크립트의 this

1. this
   1. this는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행 중인 함수 또는 메서드의 "소유자"를 가리킵니다.
   2. 전역 컨텍스트에서의 this
      1. 전역 객체를 가리킴. 브라우저에서는 window

      console.log(this); // 브라우저에서는 window 객체를 출력
      

   3. 함수 내에서의 this
      1. 일반 함수에서는 전역 객체
      2. 엄격 모드에서는 undefined

      function regularFunction() {
          console.log(this); // window 또는 global 객체
      }
      
      function strictFunction() {
          'use strict';
          console.log(this); // undefined
      }
      
      regularFunction();
      strictFunction();
      

   4. 객체의 메서드로 호출될때는 해당 메서드를 호출한 객체에 바인딩됨
      1. 코드

      const obj = {
          name: 'JavaScript',
          getName: function() {
              console.log(this.name);
          }
      };
      
      obj.getName(); // 'JavaScript'
      

   5. class의 생성자 함수에서는 새로 생성되는 객체를 가리킴
      1. 코드

      function Person(name) {
          this.name = name;
      }
      
      const person = new Person('John');
      console.log(person.name); // 'John'
      

   6. 이벤트 핸들러에서의 this는 이벤트를 받는(이벤트가 실행되는) 요소를 가리킴
      1. 코드

      document.getElementById('myButton').addEventListener('click', function() {
          console.log(this); // 클릭된 버튼 요소
      });
      

   7. 화살표 함수에서의 this는 일반 함수와는 다르게 this를 자체적으로 바인딩하지 않고, 함수 생성 시점의 실행 context를 상속
      1. 코드

      const obj = {
          name: 'JavaScript',
          regularFunction: function() {
              setTimeout(function() {
                  console.log(this.name); // undefined (전역 객체의 name 속성)
              }, 100);
          },
          arrowFunction: function() {
              setTimeout(() => {
                  console.log(this.name); // 'JavaScript'
              }, 100);
          }
      };
      
      obj.regularFunction();
      obj.arrowFunction();