Here is a snippet that you can use to understand this in JavaScript. Make sure you have the console open and read the logs as you click on the buttons. The code is here in GitHub as well.

Browser console output comparing two buttons: the ES5 handler logs this.age as NaN, while the ES6 arrow function logs this.age as 56
this.age works as expected with an ES6 arrow function

Why ‘this’ example?

This example is helpful because it doesn’t need to be transpiled. It works with vanilla JS today in current browsers. Most students these days are working in a React codebase where they can magically write a method as an arrow function, but the class fields proposal isn’t official yet. Here is a Stack Overflow answer explaining that with more context.

console.log("window", this)

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;

        this.makeOlderES5 = function(event) {
            console.log("makeOlderES5")
            console.log("this", this)
            console.log("event.target", event.target)
            this.age++;
            console.log("this.age", this.age)
        }

        this.makeOlderES6 = (event) => {
            console.log("makeOlderES6")
            console.log("this", this)
            console.log("event.target", event.target)
            this.age++;
            console.log("this.age", this.age)
        }
        console.log("person", this)
    }
}

let person = new Person("Jake", 55)

let buttonES5 = document.querySelector(".ES5")
buttonES5.addEventListener("click", person.makeOlderES5);

let buttonES6 = document.querySelector(".ES6")
buttonES6.addEventListener("click", person.makeOlderES6);