질문있습니다 ㅜㅜ

Question

개인 프로젝트를 하다가 질문이 있어서 남깁니다ㅜ 제가 vuePagination 이라는 오픈소스를 사용중에 이것을 보고 methods: { clickCallback ( pageNum ) { console . log ( pageNum ); console . log ( this ); } } 이렇게 하면 this(Vue컴포넌트)속성을 찍어낼 수 있는데 clickCallback : pageNum => { console . log ( pageNum ); console . log ( this ); } 화살표 함수로 바꿀경우에는 window객체가 나올줄 알았는데 undefined 가 뜹니다 화살표함수가 아닌 일반함수로 콜백함수로 등록하고 this를 사용하면 현재 컨텍스트인 vue 컴포넌트를 가르켜서 속성을 출력할 수 있고 화살표함수인 경우는 현재 컨텍스트가 아닌 바깥의 부모컨텍스트를 참조하기에 window 객체를 출력할줄 알았는데 undefined가 뜨길레 이해가 잘안되서 여쭤봅니다.. 그리고 공식문서에는 화살표 함수로 메소드를 정의하면 안된다고 하는데 제가 사용한 라이브러리에서는 사용법이 < script > export default { methods : { clickCallback ( pageNum ) => { console . log ( pageNum ) } } } 이렇게 나와있었는데 다른 문법인건가요 ???

캡틴판교 · Answer

안녕하세요 진영님, 좋은 질문이네요. 말씀하신 것처럼 뷰 인스턴스 옵션 속성에는 화살표 함수를 사용하면 안됩니다. 그 이유는 말씀하신 공식 문서에 잘 설명이 되어 있구요. 한 가지 첨언 드리자면 화살표 함수인 경우에는 window가 아니라 코드가 실행되는 시점의 상위 스코프를 참조합니다. 그랬을 때 현재 전역으로 객체를 선언한 게 아니라 .vue 파일에서 객체를 선언하였으므로 해당 객체가 될 것 같네요.  라이브러리에서 화살표 함수를 쓰라고 한 부분은 저도 의도를 잘 모르겠는데.. 해당 이유에 대해서는 그 오픈 소스 쪽 제작자에게 물어봐야 할 것 같습니다 ㅎㅎ