When to add members to a prototype?

Question

In the below code,

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        this.stac.push(item);
    }
}

How to decide whether push and pop are instance members of Stack class (shown above) or members of Stack.prototype?

The methods that are common should be defined on prototype, why are they defined on each instance — Tushar, Apr 14 '16 at 05:06
By using this constructor function you can instantiate many individual objects, each with an array in it. But you don't need to create the pop and push functions in each object since they are exactly the same. So you define them at the Stack.prototype since Stack.prototype will be assigned as prototype to all objects instantiated by this constructor. — Redu, Apr 14 '16 at 05:13

Ivan · Accepted Answer · 2016-04-14T07:01:26.997

If you write it inside of a class every instance of that class will have its own push and pop methods, so you redefine those methods for every instance. If you define those methods for prototype all instances will share those methods. So you can easily change those methods on the run for every instance if you want. Otherwise you have to rewrite those methods for every previously created instances. Defining methods via prototype is considered a good practice. It's faster, better and it makes inheritance easier!

Check Addy Osmany - Learning JavaScript Design Patterns.

If you want to check whether property is from a prototype or from the instance you can use this: instanceName.hasOwnProperty(propertyName)

In your example:

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        this.stac.push(item);
    }
}

Stack.prototype.notAnOwnProperty = 12;

var stack = new Stack();

console.log(stack.hasOwnProperty('pop'));
console.log(stack.hasOwnProperty('notAnOwnProperty'));

You will get:

true
false

JSFiddle

Tushar · Answer 2 · 2016-04-14T05:19:18.580

The properties and methods which are defined inside constructor function are the properties of that object. These are not shared between instances.

The simple rule is

Anything that is added on this instance inside constructor function is private to that instance

You can use Object.is() to compare if different instances points to the same method.

Your Code:

function Stack() {
    this.stac = new Array();
    this.pop = function () {
        return this.stac.pop();
    }
    this.push = function (item) {
        console.log('In push');
        this.stac.push(item);
    }
}

var stack = new Stack(),
    stack2 = new Stack();
console.log(Object.is(stack.push, stack2.push)); // false

Recommended Way:

It is recommended to add the common shared properties and methods on prototype. These properties and methods are shared between object instances.

function Stack2() {
    this.stack = new Array();
}
Stack2.prototype.pop = function () {
    return this.stack.pop();
};
Stack2.prototype.push = function (item) {
    console.log('In push');
    this.stack.push(item);
}
var stack = new Stack2(),
    stack2 = new Stack2();

console.log(Object.is(stack.push, stack2.push)); // true

Cool, this actually answers the original question `How to decide whether push and pop are instance members of Stack class(shown above) or members of Stack.prototype` — gurvinder372, Apr 14 '16 at 05:18

score 0 · Answer 3 · answered Apr 14 '16 at 05:11

To add on to @Lends answer you also want to add properties and methods to the prototype when you want to inherit that object in another object and use them within the child object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Inheritance

score 0 · Answer 4 · answered Apr 14 '16 at 05:29

Inheritance means re-usability, and if needed gives liberty to override functionality, by hiding already written method. In above example, if you want to Inherit(Make Parrent Object) Stack further and want to give default push and pop functionality to its inherited objects, in that case you should put push and pop function in Stack.prototype. this will give inherited object(child object) liberty to use default pop and push methods or override these methods(by declaring new one with same name).

For further reference for Portotype Pattern please follow Prototype Pattern

Explained with example on pluralsight Using the JavaScript Prototype Pattern

When to add members to a prototype?

4 Answers4