class 내의 함수를 화살표 함수로 쓰는 이유가 있나요??
270
작성한 질문수 15
안녕하세요.
class 내에 함수는 function을 적지 않아서 더 간단하게 작성이 가능한데, 화살표 함수를 사용하시는 이유가 있을까요??
class Monster {
power = 10
constructor(qqq){
this.power = qqq
}
attact = () => {
console.log("공격하자!!");
console.log("내 공격력은" + this.power + "야!!!");
}
run(){
console.log("도망가자!!");
}
}
// 둘의 차이는??답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
춘몽님, 클래스 내부에서 화살표 함수를 사용하는 이유는 this 바인딩과 관련이 있습니다.
기본적으로 클래스에서 메소드를 정의할 때는 function 키워드를 사용하지 않는 방식으로 메소드를 선언합니다. 그러나 이 경우 해당 함수에서의 this는 호출할 때 결정되는데, 이로 인하여 콜백 함수 등으로 메소드를 전달할 때 예상치 못한 문제가 발생할 수 있습니다. 예를 들어, 이벤트 리스너로 메소드를 전달할 경우 this가 예상한 객체가 아닌 window나 undefined가 될 수 있죠.
반면, 화살표 함수는 자신이 선언된 위치의 this 컨텍스트를 ‘lexical’하게 바인딩하기 때문에, this가 클래스 인스턴스를 가리키도록 유지할 수 있습니다. 따라서 화살표 함수를 사용하면 메소드가 어디서 호출되더라도 this가 클래스 인스턴스를 참조함을 보장받을 수 있습니다.
위 코드에서 attact 메소드가 화살표 함수로 선언되었기 때문에, 이 함수가 다른 콜백으로 사용되더라도 this.power는 항상 Monster 클래스의 인스턴스의 power 프로퍼티를 참조하게 됩니다.
이는 run 메소드와의 주요 차이점이며, run 메소드의 경우에는 특정 상황에서 this 바인딩에 주의해야 합니다.
단, 화살표 함수 사용은 클래스 필드 문법을 사용해야 하고, 이는 아직 ECMAScript의 정식 표준은 아니라는 점에 유의해 주세요. 일부 환경 또는 브라우저에서는 클래스 필드 문법이 지원되지 않을 수 있습니다.
그래프 ql 문서 사용할때 느낌표 남는거 어떻게 없애나요?
0
83
2
강의 전체 소스 코드를 받고싶습니다.
0
76
2
fontawesome 사용 문의
0
78
2
소스 코드 부탁드립니다~
0
85
2
깃 레포지터리 소스
0
83
2
커리큘럼12.css 정렬 에 나오는 과제 정답알고싶어요
0
73
2
10-01 Entity TypeOrmModule.forRoot 에 entities
0
87
3
강의 버전관련 문의입니다
0
103
2
Ubuntu 설치 관련
0
61
1
schema.gql 질문 드립니다.
0
51
1
서버 재실행시 Many to Many
0
102
3
input 관련 문의
0
90
2
Rest API 보다는 graphql이 주된 내용인데
0
130
2
강의 전체 소스코드 받을수있을까요?
0
155
1
도커볼륨 마운트 관련
0
127
2
findOne 타입스크립트오류
0
109
1
http => htrtps 호출 인증서 신뢰 오류
0
353
1
self-signed certificate in certificate chain 에러 발생
0
417
1
mongoose 설치 오류
0
142
1
특정 API, 특정 IP 허용 (단일경로에 CORS 활성화)
0
282
2
08-06
0
178
3
구조랑 패턴 관련해서 질문
0
125
2
mydocker
0
128
2
coolsms statuscode 2000 인데 전송안돼는 경우 확인.
0
156
1