Difference between adding function to prototype and object literal in javascript

Question

If I have a constructor Quo

var Quo = function (string) {
     this.status = string;
};

and then made a new object using var myQuo = new Quo("confused");

what would be the difference between:

Quo.get_status = function () { 
    return this.status;
};

and

Quo.prototype.get_status = function () { 
    return this.status;
};

This answer may help you out understanding constructor functions and prototype: http://stackoverflow.com/a/16063711/1641941 — HMR, Dec 22 '13 at 06:04

score 25 · Accepted Answer · edited Jun 29 '16 at 00:06

Let's suppose you have created myQuo, as you described

var myQuo = new Quo("confused");

If you define get_status as a property of Quo, then to get the status of myQuo you would have to call Quo.get_status. However, Quo.get_status will need to know the object context (myQuo) to return the correct value of status. You can redefine the function to accept the object as an argument as in the following:

Quo.get_status = function (quo) { 
  return quo.status;
};
var status = Quo.get_status(myQuo);

Alternatively, you could keep the function Quo.get_status as you wrote it in your question, but you will need to invoke the function in a manner that binds myQuo to "this":

Quo.get_status = function() {
  return this.status;
};
var status = Quo.get_status.call(myQuo);

Either solution is awkward. The preferred solution is to take advantage of Javascript's prototype functionality and define get_status as a prototype function that will be locally accessible to all Quo objects, such as myQuo.

Quo.prototype.get_status = function () { 
  return this.status;
};
var status = myQuo.get_status();

This makes sense, my only confusion is when you call `Quo.get_status(myQuo);`. How can you pass in a argument `myQuo` if the function takes no parameters? Is this a mistake? — roscioli, Dec 21 '13 at 23:24
@oroscioli You can't actually, thanks for pointing that out, since I accidentally skimmed over that detail. I have edited my answer accordingly. — Peter Olson, Dec 21 '13 at 23:29
It seems the difference between static method and instance method in Java — sotondolphin, Oct 10 '14 at 03:07

Kyle Sletten · Answer 2 · 2013-12-21T23:24:40.280

When you define a function, it has a property prototype that is used as the [[prototype]] of all of the objects it creates using the new keyword. When you add members to Quo.prototype, all objects created using new Quo() will be able to read the member as if they had it (through their [[prototype]], namely Quo.prototype). On the other hand, if you assign members to Quo directly, you can only access them through Quo itself.

Example:

var Quo = function (status) {
    this.status = status;
}

Quo.status = "enlightened";

Quo.get_status = function() {
    return this.status;
}

Quo.prototype.get_status = function() {
    return this.status;
}

var quo = new Quo("confused");

Quo.get_status(); // "enlightened"
quo.get_status(); // "confused"

Difference between adding function to prototype and object literal in javascript

2 Answers2

Linked