Javascript and prototypal Inheritance

Question

Is there a difference between these two statements in Javascript?

function p() {
 this.do = function(){alert('cool')};
}

and this one?:

function p(){};
p.prototype.do = function(){alert('cool')};

One more thing, why can't you do:

function p(){};
p.do = function(){alert('cool')};

Thank you so much!

• Šime Vidas: Is p invoked as a constructor or as a regular function? (That kind-of makes a big difference :))
• Nathan Prometheus: constructor...i think....I'm not totally sure, I'm new to this, sorry :(
• Nathan Prometheus: wait, yes constructor. I'm pretty sure
• user785541: possible duplicate of Adding methods to custom objects in Javascript
• Šime Vidas: p.do = ... creates a do property on the p constructor function itself. But, p instances (e.g. var p1 = new p();) inherit from the p.prototype object, and not from the p function object itself. That's why you "can't do it".

Answer 1

Given your first two examples, assuming you call p() as a constructor:

• on the surface, they will behave identically

But the first example...

• will create a new, identical function for each object created from new p()
• [that function] will have access to the local variables and parameters inside the p() constructor

// p.prototype = {}
new p(); // { do:function(){alert('cool')}; } ------^
new p(); // { do:function(){alert('cool')}; } ------^
new p(); // { do:function(){alert('cool')}; } ------^

and the second example...

• will share the function placed on the prototype between all the objects created from new p()
• [that function] will not have access to private variables/parameters in the constructor

//p.prototype = {do:function(){alert('cool')};}
new p(); // {} ------^
new p(); // {} ------^
new p(); // {} ------^

---

The third example does not work because in JavaScript, a function is an object, so all you're doing it placing a new property on that object. It has no effect on the invocation of that function.

• Nathan Prometheus: One more question though, which one is "better", so to speak?
• user113716: @Nathan: Neither. It all depends on what you need. If the function has no need for access to the private local variables in the constructor, then definitely place it on the prototype object so that you're not unnecessarily recreating the functions. If it does need access, then you really need to create the function inside the constructor. There are some patterns that are a little trickier that attempt to keep the private vars private, yet offer access via a function on the prototype, but I don't know if any solution really accomplishes it.

Answer 2

Functionally speaking, they are the same.

The first one defines a function for each object var o = new p() so it is not optimal from a memory viewpoint.

You can do what you're showing in your 3rd example, but you're not going to accomplish what you think:

function p(){};
p.do = function(){alert('cool')};
p.do(); // this will work
var o = new p(); // This won't have the 'do' function because that's not how it works in javascript.