Here is a snippet and link to my favorite example 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.

todo — 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);