javascript this에 대해서 제대로 알아봅시다.

This

This는 많은 사람들이 헷갈려 합니다. 그러면 어떻게 구별을 해야하는가? This는 호출한 놈이 누군지 보면 됩니다.

var someone = 
{
    name: 'bugtype',
    showMessage: function() {
        console.log(this)
    }
}

위와 같은 객체를 만들고 아래와 같이 한번 실행을 해봅시다.

// case 1
var object = someone
object.showMessage();

• 호출한놈 : object

• 결과 : {name: "bugtype", showMessage: ƒ}

// case 2
var object2 = someone.showMessage
console.log(object2)

• 호출한놈 : window ( console.log )

• 결과 : ƒ () { console.log(this) }

// case 3
someone.showMessage()

• 호출한놈 : someone

• 결과 : {name: "bugtype", showMessage: ƒ}

// case 4
var btn = document.getElementById('btn1');
btn.addEventListener('click', someone.showMessage);

• 호출한놈 : btn

• 결과 : <button id="btn1"> click me </button>

// case 5
var btn2 = document.getElementById('btn2');
var bindingSomeone = object2.bind(someone);
btn2.addEventListener('click', bindingSomeone);

• 호출한놈 : btn

• 결과 : {name: "bugtype", showMessage: ƒ}

참고

https://www.youtube.com/watch?v=PAr92molMHU