When emulating a 'class', why set the methods in the .prototype property and not in the constructor itself?

Question

I'm trying to understand 'classes' in JavaScript.

Usually emulating classes in JavaScript looks something like this:

function MyClass(someParameter) {
    this.someValue = someParameter;
    this.someOtherValue = "green";
}

MyClass.prototype.someMethod = function() {
    console.log("Hello!");
};

While the non-function members are set inside the constructor, the method is added outside of the constructor, to the .prototype property of the constructor.

I'd like to understand why. Why not create the methods inside the constructor, just like the rest of the members? Meaning:

function MyClass(someParameter) {
    this.someValue = someParameter;
    this.someOtherValue = "green";

    this.someMethod = function() {
        console.log("Hello!");
    }
}

http://stackoverflow.com/questions/1635116/javascript-class-method-vs-class-prototype-method — adeneo, Jan 08 '15 at 16:58
There's no such thing as a class in JavaScript. However there are some ways to create an object. (http://www.phpied.com/3-ways-to-define-a-javascript-class/) — , Jan 08 '15 at 16:59
Properties on the prototype are **shared** by all instances. Properties you assign to `this` in the constructor are distinct. You can set function-valued properties in the constructor, and you can set non-function-valued properties on the prototype. — Pointy, Jan 08 '15 at 16:59
@Pointy I see. So what I'm asking is, why would I choose to set the non-function properties inside the constructor using `.this`, but the function properties outside the constructor using `.prototype`? — Aviv Cohn, Jan 08 '15 at 17:07
@AvivCohn: Because *"properties on the prototype are **shared** by all instances."* Related: http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript — Felix Kling, Jan 08 '15 at 17:08
The *why* part of the question largely depends on the needs of the software being written. — Pointy, Jan 08 '15 at 17:24

score 1 · Answer 1 · answered Jan 08 '15 at 17:03

Here are some main points:

Performance: Ctor methods are created each time an instance is created while prototype methods are created once and inherited.prototype is better here.
Ctor methods have access to privates inside your function while prototype ones don't.

score 1 · Answer 2 · answered Jan 08 '15 at 17:10

Why not create the methods inside the constructor, just like the rest of the members?

Because methods are usually not distinct between instances. In your example every instance has the same someMethod method, doing the exact same thing. So it only makes sense to create that method only once.

Scalar data on the other hand is often specific to the instance (i.e. distinct between instances) and thus should be initialized in the constructor.

FWIW, ECMAScript6 introduces the new class syntax which encourages such structure.

function MyClass(someParameter) {
    this.someValue = someParameter;
    this.someOtherValue = "green";
}

MyClass.prototype.someMethod = function() {
    console.log("Hello!");
};

is equivalent to

class MyClass {
    constructor(someParameter) {
        this.someValue = someParameter;
        this.someOtherValue = "green";
    }

    someMethod() {
       console.log("Hello!");
    }
}

When emulating a 'class', why set the methods in the .prototype property and not in the constructor itself?

2 Answers2