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!

Is `p` invoked as a constructor or as a regular function? (That kind-of makes a big difference `:)`) — Šime Vidas, Aug 20 '11 at 22:42
constructor...i think....I'm not totally sure, I'm new to this, sorry :( — Nathan Prometheus, Aug 20 '11 at 22:43
possible duplicate of [Adding methods to custom objects in Javascript](http://stackoverflow.com/questions/6276175/adding-methods-to-custom-objects-in-javascript) — Wladimir Palant, Aug 20 '11 at 22:49
`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". — Šime Vidas, Aug 20 '11 at 22:56

user113716 · Answer 1 · 2011-08-20T23:02:03.963

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.

One more question though, which one is "better", so to speak? — Nathan Prometheus, Aug 20 '11 at 23:04
@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. — user113716, Aug 20 '11 at 23:19

score 0 · Answer 2 · answered Aug 20 '11 at 22:47

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.

Javascript and prototypal Inheritance

2 Answers2