this.functionName works differently depending on event listener

Question

Random coding question, see below,

// Event listener method 1
window.addEventListener('hashchange', () => {
  this.hashHandler()
})

// Event listerner method 2
window.addEventListener('hashchange', this.hashHandler)


hashHandler () {
this.flickity.viewFullscreen() // Works for method 1, not for 
method 2
}

The comments on the code above should be self explanatory.. do you know why a change in how the event listener is declared results in 'this' working..

Answer 1

Read about differences between arrow function and function declarations. Basically when you declare function like this function () {} then value of this is the function itself. Within arrow function this keeps the value of its parent's this.