Why is 'this' different when a function is invoked in a callback vs when invoked regularly ex.) showThis(); [duplicate]

enter image description here

ui.title.addEventListener('click', ui.showThis)
ui.title.addEventListener('click', () => {
    ui.showThis();
})

I have a keyup event on an input field in my application that calls a function in my UI Controller module

showThis(){
  console.log(this);
}

which logs the value of this when the input field is clicked.

enter image description here

Why is it that the value of 'this' is different when the function is called within a callback function on the event listener vs. when the function is itself passed as the callback?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/htNsJ70