📚 자바스크립트 this vs 제이쿼리 $(this) 차이

자바스크립트 this

자바스크립트에서 this는 현재 실행 컨텍스트에서 참조되는 객체를 가리킨다. 일반적으로 함수 내에서 사용되며, 함수 호출 방식에 따라 this가 가리키는 객체가 달라지게 된다.

예를들어 이베트 핸들러를 인라인으로 등록할 경우 함수내의 this는 버튼이 아닌 window 객체를 가리키게 된다.

<button onclick="foo()">Button</button>

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

반면 addEventListener 이벤트 핸들러 같은경우 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

<button class="btn">Button</button>

<script>
    document.querySelector('.btn').addEventListener('click', function (e) {
      console.log(this); // <button id="btn">Button</button>
      console.log(e.currentTarget); // <button id="btn">Button</button>
      console.log(this === e.currentTarget); // true
    });
</script>

---

제이쿼리 $(this)

자바스크립트 this와 제이쿼리 $(this)는 명칭은 같을 지라도 실제로 표시되는 정보는 서로 다르다.

제이쿼리에서 $(this)는 이벤트 핸들러 내에서 이벤트가 발생한 요소를 가리키는 역할을 한다. 자바스크립트 this는 현재 실행 컨텍스트에서 참조되는 객체를 가리키고, $(this)는 이벤트가 발생한 요소를 가리킨다는 다른점이 있다.

아래 코드 실행 결과를 보면 자바스크립트의 this 경우는 태그가표시되고, 제이쿼리 $(this)의 경우는 태그 요소의 정보를 담은 Object로 표시된다.

<button class="btn">Button</button>

<script>
    $('.btn').click(function() {
        console.log(this);      // 현재 실행 컨텍스트에서 참조되는 객체
        console.log($(this));  // 이벤트가 발생한 요소
    });
</script>

this

$(this)

이렇게 별도로 Object로 감쌌기 때문에 제이쿼리 전용 메서드들을 사용할 수 있는 이유이기도 하다.

만일 제이쿼리 객체에서 자바스크립트 this와 같은 데이터를 갖기 위해서는 $(this)[0] 로 꺼내면 된다. 즉, this  === $(this)[0] 인 것이다.