2

Suppose I create an object in javascript.

var myObject = {};

What is the difference between...

myObject.someFunc = function(){...};

and 

myObject.prototype.someFunc = function(){...}

in javascript?

I am having trouble understanding the difference or if there is a difference and how and when to use either of these syntaxes.

It seems when I code something like this that there really is no difference.

I am looking for both a client side (browser) and server side (like node.js) answers.

I want to code properly and accurately and this is really bothering me.

Steeve Cannon
  • 3,682
  • 3
  • 36
  • 49
  • 3
    Note that the `prototype` property is only meaningful for function objects, when they are used as 'constructors'... See also: http://stackoverflow.com/q/2111288 – Christian C. Salvadó May 24 '12 at 18:33
  • I'd like to revoke my close vote - this has ended up sufficiently different that it's not actually a duplicate any more. – Alnitak May 24 '12 at 18:48

3 Answers3

3

In this case:

var myObject = {};
myObject.someFunc = function(){...};

All you're doing is creating a plain object, which happens to have a property which is a reference to a function. This is often done just for name spacing, i.e. to group a whole load of functions in one place under a common object.

Note however that var myObject = {} doesn't actually have a prototype so your second example is impossible.

For an object to have a prototype it must be the result of a constructor function, i.e.

function MyObject() {
    ...
}

MyObject.prototype.someFunc = function() { }

var myObject = new MyObject();
// myObject.someFunc can now be used

The prototype is a property of the constructor function - not of any instance of that class.

If you put the function on the prototype only one instance of the function object exists and will be shared by all instances of the class. This is more memory efficient that having a copy on each instance.

All of this applies regardless of whether the code is in a browser or on a server - it's still the same language.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Alnitak, apologies in advance I am a 2 week old js noob. I am confused on the scope of variables passed into a method in my first example (I believe called static), to a method of a class instance and to a method done as the prototype example? In the first two cases the variables have their own scope that is shall we say safe. In the prototype example, if all instances share the same function, does that mean variables passed to the method/function have a shared scope and thus could over write one another (assuming they should not). There is proly a SO thread on this, but I can't find it. – Steeve Cannon May 24 '12 at 21:06
  • oh yeah, and than you very kindly. – Steeve Cannon May 24 '12 at 21:07
0

myObject.someFunc = function(){...} is a one time instance of that function, who's return value is being assigned to the someFunc property of myObject.

myObject.prototype.someFunc = function(){} is actually creating a method that can be called anywhere on myObject and will change the same instances of values each time.

myObject.prototype.someFunc = function(num){
    this.num_to_be_stored = num;
}

will change the value of num_to_be_stored not someFunc which is what is happening in the first instance.

edit: sorry early morning was not clear on what I was trying to say.

Ryan
  • 5,644
  • 3
  • 38
  • 66
0

Essentially this represents a static method (or a method attached to only that object (myObject in this case):

myObject.someFunc = function () {...};

This represents a method attached to the prototype of the object (an instance method):

myObject.prototype.someFunc = function () {...};
doogle
  • 3,376
  • 18
  • 23
  • If you're going to -1, at least leave a comment. This answer is not wrong. It draws an analogy to common OOP ideas that most programmers are more familiar with over JS's prototype inheritance model. – doogle May 24 '12 at 18:59
  • The first half of your answer is correct, but the second half is incorrect and misleading. `myObject.prototype` is not a thing. You either mean the constructor function's `.prototype` property, or you mean `myObject.__proto__` in JS environments that support it. @ryan's answer is wrong for the same reason. – jimbo May 29 '12 at 19:44