❓ 오늘의 문제
자바스크립트로 클릭하면 텍스트가 빨간색으로 변하는 코드를 짜던 도중 막혔다.
<body>
<p id="text">hello</p>
</body>
<script>
onload = () => {
let p = document.getElementById("text");
// () => : 화살표 함수
p.onclick = () => {
this.style.color = "red";
};
};
</script>👆 위 코드는 문서가 준비가 다 되었을 시점(onload) 에 id 가 text인 DOM객체를 찾고
해당 DOM객체를 클릭 할 시 this를 통해 클릭된 DOM객체의 color를 빨간색으로 바꾸도록 하였다.
그러나 이렇게 하였을 때 텍스트를 클릭하여도 빨간색으로 바뀌지 않았다.
그리고 콘솔 창에 에러가 발생하였다.
정의되지 않은 타입에 속성을 변경할 수 없다.
즉 this로 가져온 것이 undefined 라는 것 이다.
💡 해결 ?
검색을 해보니 화살표 함수는 this 바인딩이 안된다는 이유로 일반 함수로 해야 한다는 내용을 보고 코드를 바꿔보았다.
onload = () => {
let p = document.getElementById("text");
// function () : 일반 함수
p.onclick = function () {
this.style.color = "red";
};
};👉 이렇게 하였더니 정상적으로 텍스트의 색깔이 바뀌었다.
🤔 그렇다면 화살표 함수는 this 바인딩이 안된다는 소리가 도대체 무엇일까?
우선 this라는 객체에 대해서 먼저 알아보자
❓ this 란
호출되는 방식에 따라 값이 결정되는 특수한 객체이며,
일반 함수인지 화살표함수 인지에 따라 호출 값이 달라진다.
🔷 일반 함수에서의 this 바인
일반 함수에서의 this는 함수를 호출한 객체를 가리키게 된다.
즉 부모 함수 내부에 자식 함수가 있을 경우
자식 함수에서 this를 호출 했을 때
자식 함수를 호출한 부모를 가리키게 되는 것이다.
1️⃣ 일반 함수에서 바로 호출
function hello () {
console.log(this);
}
👉 전역 객체 즉 window를 가리킨다.
2️⃣ 객체 메서드에서 호출
const person = {
name: "홍길동",
method: function () {
console.log(this.name);
},
};
person.method();👉 this 는 method 함수를 호출한 person객체를 가리키며 , person의 name을 가져오게된다.
3️⃣ 중첩 함수에서 호출
const person = {
method1: function () {
console.log(this); //this -> person2
//일반 함수로 호출된 메서드 -> 모두 전역 객체 (window)
function method2() {
console.log(this); //this -> window
}
method2();
},
};
person.method1();👉 객체 메서드에서 호출 된 함수는 메서드 안에서 호출 된것이므로 일반 함수로 분류 된다.
따라서 일반 함수의 this는 window를 가리키게 된다.
🔷 화살표 함수의 this 바인딩
화살표 함수에는 this 라는 객체가 존재하지 않는다.
그렇기 때문에 화살표 함수에서 this를 사용할 경우 상위 스코프의 this를 사용하게 된다.
즉 함수를 호출한 객체 를 가져오는 일반 함수와 달리
함수를 호출한 객체를 또 호출한 객체 를 가져오는 것이다.
그렇다면 중첩 함수를 통하여 화살표 함수의 this가 어떤식으로 호출되는지 알아보자
중첩 함수 예제
const person = {
name: "홍길동",
//객체 안에 메서드
method: function () {
name: "김철수";
console.log("일반:" + this.name);
//객체 안에 메서드 내부 속 메서드
method2 = () => {
console.log("화살표:" + this.name);
};
func2();
},
};
person.method();👆 위 코드는 person 이라는 객체 내부에 method라는 객체 안에 중첩으로 저장된 method2라는 메서드가 있다.
객체 안에 있는 메서드는 일반함수로 this를 호출하게 될 경우 해당 함수를 호출한 객체인 person이 호출된다.
❓ 결과
객체 안에 메서드 내부에서 생성된 화살표 함수 method2는 해당 함수를 호출한 method(함수) 라고 하니
원래라면 해당 메서드를 호출한 메서드인 method의 this가 가져와지는 것 인데.
💡화살표 함수는 this라는 객체가 존재하지않아 상위 스포크 즉, this를 호출한 함수를 또 다시 호출한 함수의 객체를
가져오는것이다.
따라서 method2가 실행된 다면 method() 함수를 호출하는 객체를 가져오게된다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 배열 메서드에 대해 알아보기(Map,Filter,Reduce,Find,ForEach) (2) | 2025.02.05 |
|---|---|
| [JavaScript] Arguments 와 나머지 매개변수에 차이에 대해 알아보자 (3) | 2025.02.04 |
| [JavaScript] 이벤트 흐름과 addEventListener 의 캡쳐 리스너 와 버블 리스터에 따른 흐름 (2) | 2025.01.31 |
| [JavaScript] 선언 전에 호출한 변수와 함수의 차이점을 알아보자 (2) | 2025.01.28 |
| [JavaScript] 변수의 종류에 따른 재 선언 , 재 할당 그리고 호이스팅을 예제로 알아보기 (2) | 2025.01.27 |