Arrow vs classic method in ES6 class

Question

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}

I'm not sure it works normally, but with Babel (Webpack) it works. — Vesmy, Aug 26 '17 at 14:06
possible duplicate of [How to use arrow functions (public class fields) as class methods?](https://stackoverflow.com/q/31362292/1048572) — Bergi, Oct 29 '20 at 20:42

score 23 · Accepted Answer · answered Aug 26 '17 at 17:40

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.

Arrow vs classic method in ES6 class

1 Answers1

Linked

Related