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을 객체로 만들어서 처리
});

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다