javascript - Is there any disadvantage to make all the instance methods an arrow function, to avoid lost bindings?

Question

Is there any disadvantage to make all the instance methods an arrow function? This way, we don't have the "lost binding" issue.

So for example, the following has the lost binding issue. We don't usually write code to invoke this.foo() this way, but in ReactJS, for example, we use onClick={this.foo}, which translates to createElement({ ..., onclick: this.foo, ...}), so there is lost binding right there.

class Dog {

    constructor(name) {
        this.name = name;
    }

    giveSound() {
        console.log(`${this.name} says woof`);
    }

    giveAlert() {
        console.log("I am alert");
        const f = this.giveSound;
        f();
    }

}

const woofie = new Dog("woofie");

woofie.giveSound();

woofie.giveAlert();

question from:https://stackoverflow.com/questions/65939534/is-there-any-disadvantage-to-make-all-the-instance-methods-an-arrow-function-to

Answer 1

There are a couple of disadvantages, but as you've pointed out, there's also an advantage, so it's really up to you.

The two main disadvantages I'm aware of are:

1. Every instance gets its own function objects for each method (three months = three function objects per instance), rather than sharing via the prototype. That means:

   • You create a bunch more objects when you create the instance (the function code is shared, but each instance gets its own function objects), and

   • Inheriting may be trickier

2. It makes the methods harder to mock for testing purposes, because they're not on the prototype, they're built into each instance.