this의 동작 방식 비교

선결론!!!

📌 핵심 요약

함수 타입this가 가리키는 대상

function () {}	호출한 주체 (ex. 이벤트 발생한 tr 요소)
() => {}	선언된 위치의 this (렉시컬 스코프)

https://br.freepik.com/vetores-premium/icone-de-vetor-de-mouse-de-computador-pixel-art-para-jogo-de-8-bits-em-fundo-branco_30719259.htm

1. function () {} (전통적인 함수)

$("tr").hover(function () {
    console.log(this); // 👉 현재 이벤트가 발생한 tr
});

 

이 경우 this는 이벤트가 붙은 DOM 요소를 자동으로 가리켜요.
즉, 마우스를 올린 그 tr 태그 하나.

jQuery는 이 전통적인 방식에 최적화되어 있어서 이렇게 쓰는 게 일반적이에요.

 

2. () => {} (화살표 함수)

$("tr").hover(() => {
    console.log(this); // 👉 이건 tr이 아니라 바깥의 this
});

 

🧠 외부 스코프란?

간단히 말해 **화살표 함수가 만들어진 코드 바깥에 있는 this**를 말해요.

const that = this; // 외부 스코프 
const func = () => { 
	console.log(this); // 여기서 this는 위에 있던 that과 같음 
};

 

후후 그래도 모르겠군요..!