What is the most effective way to create ES6 JavaScript class members?

Question

With ES5 there is performances optimum way to create Objects and their members like this.

var Car = function () {
  this.milage = 0;
}

Car.prototype.run = function () {
  this.milage++;
}

But with ES6 we use class syntax to create classes.

class Car {
    constructor(){
        this.milage = 0;
    }
}

when we use this ES6 approach, I had a question of what is the most efficient way of creating class members?

is it like creating class member within the class

class Car {
    constructor(){
        this.milage = 0;
    }

    run() {
        this.milage++;
    }
}

or, using the prototype approach.

Car.prototype.run = function () {
    this.milage++;
}

why would you use `class` and `prototype`? I mean, it all ends up pretty much the same, but it would be odd to mix syntaxes like that — Jaromanda X, Mar 27 '20 at 06:55
Defining a method as part of the class syntax does actually define it on the prototype. `class` is just syntactic sugar over the "old" function things `class Car() { constructor() {}}` = `function Car() {}` and `run() {}` = `Car.prototype.run = function() {}` — VLAZ, Mar 27 '20 at 06:55
How is performance related to the question? Have you met a situation where object creation would be a bottleneck? — Teemu, Mar 27 '20 at 07:05
@Teemu I meant to comment on this as well. Typically, using the prototype to define methods is not really about performance. Not in terms of CPU cycles. It does lead to less memory bloat, since if you have `function Person(name) { this.name = name; this.sayHI = () => \`Hi, I'm ${this.name}\` }` and you create a thousand `Person` objects, you also have a thousands `sayHi` functions defined in memory. With the prototype you'd have a single function for however many `Person` objects there are. So, there is a memory efficiency aspect but it's hardly strictly and universally better. — VLAZ, Mar 27 '20 at 07:25
@VLAZ That's true, but in that case the difference comes from using own properties vs. prototype, OP is asking about variants of prototype creation only. — Teemu, Mar 27 '20 at 07:29
@Teemu exactly. In some cases using the prototype or not makes no real difference. If you have only, say, three objects in memory, then two extra functions are negligable. And in some cases if you *really* need speed, then a prototype lookup might add significant enough overhead, so you're better off attaching the methods as own properties to each instance. However, in most cases, the difference matters little. Using the prototype is a good practice to get into, since you can do other prototype stuff later *if needed*. — VLAZ, Mar 27 '20 at 07:33
@VLAZ Again, I agree. But, OP seems to ask if there's a performance difference between setting the methods of the prototype inside the class declaration and setting the methods outside the class declaration. Both ways results the same prototype, and I really can't see any significant performance difference between these two. I can only assume, that OP thinks the methods are set every time to the prototype, when a new instance is created (which doesn't happen), and the instance creation could be faster, if the methods would be set outside of the class declaration. The question doesn't tell ... — Teemu, Mar 27 '20 at 07:56

score 1 · Answer 1 · answered Mar 27 '20 at 06:57

You can do either. They'll be doing exactly the same thing in 99.9% of cases. They class method syntax version:

run() {
    this.milage++;
}

is almost exactly nothing more than syntax sugar for

Car.prototype.run = function () {
    this.milage++;
}

With method syntax, the property is put on Car.prototype:

class Car {
    constructor(){
        this.milage = 0;
    }

    run() {
        this.milage++;
    }
}
console.log(Car.prototype.run);

The only time when one or the other might cause a noticeable difference would be if someone tried to call new on the method. This is forbidden for methods defined inside of classes, but permitted for functions:

function FnCar() {}
FnCar.prototype.run = function() {
};
new FnCar.prototype.run();

class ClassCar {
    run() {
    }
}
new ClassCar.prototype.run();

But that's really strange, you should almost never run into such a thing.

What is the most effective way to create ES6 JavaScript class members?

1 Answers1