Arrow vs classic method in ES6 class

5.1k views Asked by At

Is there any reason to write classic syntax of ES6 methods?

class MyClass {

    myMethod() {
        this.myVariable++;
    }

}

When I use myMethod() as callback on some event, I must write something like this (in JSX):

// Anonymous function.
onClick={() => { this.myMethod(); }}

// Or bind this.
onClick={this.myMethod.bind(this)}

But if I declare method as arrow function:

class MyClass {

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

}

than I can write just (in JSX):

onClick={this.myMethod}
1

There are 1 answers

0
Felix Kling On BEST ANSWER

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.