[자바스크립트] 화살표 함수일때와 function함수일때 this가 다르고 파라미터 e 가 다르다.

  document.querySelector('#button1')
        .addEventListener('click', (e) => {
            console.log(this);
            console.log(e.target);
            e.target.textContent = '클릭됨';
        }); 여기서의 this는     document.querySelector('#button1')
        .addEventListener('click', function (e) {
            console.log(this);
            console.log(e.target);
            this.textContent = '클릭됨';
        }); 여기서의 this랑 다르네?

네, 맞습니다. JavaScript의 함수와 화살표 함수(=>)는 this에 대해 다르게 작동합니다.

기본적으로 JavaScript의 함수에서 this는 함수가 호출되는 방식에 따라 달라집니다. 예를 들어, 함수가 객체의 메서드로 호출되면 this는 그 객체를 참조하고, 이벤트 핸들러에서 함수가 호출되면 this는 이벤트를 발생시킨 요소를 참조합니다.

그러나 화살표 함수에서는 this가 바인딩되지 않습니다. 대신, 화살표 함수는 this를 감싸고 있는 외부 스코프에서 가져옵니다. 따라서 화살표 함수 내부에서 this를 참조하면, 그 this는 함수를 정의하는 시점의 this를 가리킵니다.

이를 통해, addEventListener의 콜백 함수가 일반 함수로 정의되었을 때 this는 이벤트를 발생시킨 요소(#button1)를 참조하고, 화살표 함수로 정의되었을 때 this는 외부 스코프(여기서는 전역 스코프)의 this를 참조하게 됩니다. 웹 브라우저에서 전역 this는 window 객체를 참조합니다.0