jQuery 콜백함수 구현시 arrow function 에서의 this 문제
jQuery function 과 arrow function 에서의 this 문제
# each 문 콜백함수를 function 으로 구현하는경우 this 를 정상적으로 가져옴
$(‘div’).each( function(idx ,item){
console.log($(this) ) // 해당 div 의 this 를 정상적으로 가져옴
});
# each 문 콜백함수를 arrow function 으로 구현하는경우 this 를 가져오지못함
$(‘div’).each( (idx,item) =>{
console.log($(this)) // 해당 div 엘리먼트를 못가져옴 현재 함수를 호출한 객체가 this 가됨
});
# 엘리먼트의 반복에서의 arrow function 을 사용 할 경우
let el;
$(‘div’).each( idx , item) => {
el = $(item);
console.log(el) // this 대신 item을 객체로 만들어서 처리
});
# 이벤트에서의 arrow function 사용일 경우 function() 으루 구현한경우는 this 사용가능하다.
let el;
$(‘#btn’).on(‘click’ , (e) = > {
el = $(e.currentTarget);
console.log(el) // this 대신 item을 객체로 만들어서 처리
});