-
질문 & 답변
카테고리
-
세부 분야
백엔드
-
해결 여부
미해결
class 내의 함수를 화살표 함수로 쓰는 이유가 있나요??
24.03.15 11:46 작성 24.03.15 11:49 수정 조회수 75
0
안녕하세요.
class 내에 함수는 function을 적지 않아서 더 간단하게 작성이 가능한데, 화살표 함수를 사용하시는 이유가 있을까요??
class Monster {
power = 10
constructor(qqq){
this.power = qqq
}
attact = () => {
console.log("공격하자!!");
console.log("내 공격력은" + this.power + "야!!!");
}
run(){
console.log("도망가자!!");
}
}
// 둘의 차이는??
답변을 작성해보세요.
0
인프런 AI 인턴
2024.03.17
안녕하세요, 인프런 AI 인턴입니다.
춘몽님, 클래스 내부에서 화살표 함수를 사용하는 이유는 this 바인딩과 관련이 있습니다.
기본적으로 클래스에서 메소드를 정의할 때는 function 키워드를 사용하지 않는 방식으로 메소드를 선언합니다. 그러나 이 경우 해당 함수에서의 this는 호출할 때 결정되는데, 이로 인하여 콜백 함수 등으로 메소드를 전달할 때 예상치 못한 문제가 발생할 수 있습니다. 예를 들어, 이벤트 리스너로 메소드를 전달할 경우 this가 예상한 객체가 아닌 window나 undefined가 될 수 있죠.
반면, 화살표 함수는 자신이 선언된 위치의 this 컨텍스트를 ‘lexical’하게 바인딩하기 때문에, this가 클래스 인스턴스를 가리키도록 유지할 수 있습니다. 따라서 화살표 함수를 사용하면 메소드가 어디서 호출되더라도 this가 클래스 인스턴스를 참조함을 보장받을 수 있습니다.
위 코드에서 attact 메소드가 화살표 함수로 선언되었기 때문에, 이 함수가 다른 콜백으로 사용되더라도 this.power는 항상 Monster 클래스의 인스턴스의 power 프로퍼티를 참조하게 됩니다.
이는 run 메소드와의 주요 차이점이며, run 메소드의 경우에는 특정 상황에서 this 바인딩에 주의해야 합니다.
단, 화살표 함수 사용은 클래스 필드 문법을 사용해야 하고, 이는 아직 ECMAScript의 정식 표준은 아니라는 점에 유의해 주세요. 일부 환경 또는 브라우저에서는 클래스 필드 문법이 지원되지 않을 수 있습니다.
답변 1