화살표 함수에서의 'this' 키워드
자바스크립트의 'this' 키워드는 자신이 속한 객체를 참조합니다. 일반 함수와 달리 화살표 함수는 자체적인 'this'를 갖지 않으며, 함수가 정의된 시점을 둘러싼 렉시컬 스코프(어휘적 범위)의 'this' 값을 그대로 상속받습니다.
코드 최상위 레벨에서 정의된 화살표 함수의 'this'는 전역 객체(브라우저 환경에서는 window 객체)를 가리킵니다. 반면 일반 함수 내부에서는 호출 방식에 따라 'this'가 undefined가 되거나 예상과 다른 값으로 바뀔 위험이 있지만, 화살표 함수는 정의될 당시의 'this'를 고정하기 때문에 항상 정확하고 예측 가능한 값을 유지합니다.
예제
<html>
<body>
<script>
function Student(fname, grade) {
this.fname = fname;
this.grade = grade;
this.details = function() {
return () => {
document.write(`Hi, I'm ${this.fname} from ${this.grade} grade`);
};
}
}
let info = new Student('picaso', 'seventh');
let printInfo = info.details();
printInfo();
</script>
</body>
</html>위 예제에서 details() 메서드는 화살표 함수를 반환합니다. 이 화살표 함수는 자신을 감싸고 있는 Student 생성자의 'this'를 그대로 물려받기 때문에, 별도의 bind() 처리 없이도 this.fname과 this.grade에 정확하게 접근할 수 있습니다.
실행 결과
Hi, I'm picaso from seventh grade