[Javascript] this

헷갈리는 this를 알아보자..,

 

객체나 함수 안에서 this를 썼을 때

// this를 그냥 쓰거나 일반 함수에서 쓰면 window를 뜻함

let thisObject = {
    name: 'dust',
    test: function(){
        console.log('함수 내 this 테스트');
        // 메소드 안에서 this를 쓰면 thisObject를 뜻함(속해있는 object)
        console.log(this);
    },
    data : {
        test2: function(){
            // data를 뜻함(속해있는 object)
            console.log(this);
        }
    }
}

 

addEventListener 안에서 this를 썼을 때

modal.addEventListener('click', function(e){
    console.log('e.target: ',e.target);
    console.log('e.currentTarget: ',e.currentTarget);
    console.log('this: ',this);
    if(e.target == e.currentTarget){
        modal.classList.toggle('modal-open');
    }
})

e.currentTarget과 this는 같다(이벤트가 붙어있는 곳을 this)

 

 

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach(function(v){
            console.log(v + '먼지');
            // window
            console.log(this);
        })
    }
}
object.test();

 

 

 

화살표 함수 사용시

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach((v) => {
            console.log(v + '먼지');
            // 위에 있는 this 값을 물려씀, 그니까 object
            console.log(this);
        })
    }
}
object.test();