Arrow vs classic method in ES6 class

The feature you are using is not part of ES6. It’s the class fields proposal. It allows you to initialize instance properties without having to write a constructor. I.e. your code:

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

is exactly the same as

class MyClass {

    constructor() {
        this.myMethod = () => {
            this.myVariable++;
        };
    }

}

And this also shows you what the difference is between a normal class method an a method created via a class field:

  • A normal method is shared between all instances of the class (it is defined on the prototype)
  • A “class field method” is created per instance

So all the same as reasons as presented in Use of ‘prototype’ vs. ‘this’ in JavaScript? apply, but in short:

  • Use “class field methods” if you need a method per instance. Such is the case for event handlers that need to access the current instance. Access to this also only works if you are using an arrow function.
  • Use normal class methods in all other cases.

Leave a Comment