this.method = function(){} VS obj.prototype.method = function (){}

Question

As a c#/.net dev, I love to toy around with JavaScript in my spare time -- creating my own libraries/frameworks and such. Admittedly, they're not much (really nothing more than a loose collections of functions), but the purpose is to learn; not for other people to use.

I usually extend a basic JavaScript object this way

obj = function () {
    //basic object stuff
    this.method = function () {
        //other stuff
    };
    return this;
};

This allows me to create other objects and chain methods together, which is really slick:

obj('arg1').method();

Two Examples: jQuery Knock-off, List-Item Sorter

However, I have recently seen, in much more function code than my own, objects accomplish the same functionality this way:

function obj(){
    //stuff
}
obj.prototype.method = function () {
    //stuff
};

Example: Reddit Chrome Extension

Both ways seem to accomplish the same end, and I'm not partial to the look of either syntax. Is there a particular situation where one would be more useful than the other? What do these methods offer that makes them more desirable than the other?

Edit

Consider the following code:

var dice = function (sides) {
    this.roll(){
        return 4 //guaranteed to be random
    }
};

var d1 = dice(6);
d1.roll()  // 4;
var d2 = dice(20);
d2.roll()  // 4

Are d1 and d2 different objects, as they appear to me? Or are they pointers/nicknames to one object (var dice)?

possible duplicate of Use of 'prototype' vs. 'this' in Javascript? — Pablo Fernandez
– Pablo Fernandez, Commented Aug 2, 2011 at 21:12
FYI: Your first example works because you're actually creating method on the global window object, and then returning the global. (Unless you've excluded some key code that changes its meaning). Your dice example won't work at all because of invalid syntax and fixing the syntax, d1 and d2 will be undefined. — user113716
– user113716, Commented Aug 2, 2011 at 21:21

Pablo Fernandez · Accepted Answer · 2011-08-02 21:24:35Z

13

this.method = function(){};

Only works for that specific instance.

Obj.prototype.method = function(){};

Will work for every instance of Obj

Though in order to take advantage of prototype you should do

var o = new Obj(); // Note that functions intended to be used with "new" should be capitalized

o.method();

Dice Example

I'll assume you intended to return this in your dice() function.

That example is not really common, because calling a function does not create a new object. In your dice case you would be assigning a method to this, which inside the function is window the global object, and then returning it.

The outcome would be the same object (window) in both d1 and d2, with a method roll which would be reassigned in the 2nd call.

To achieve what you want you should create the instances with new, like this:

var d1 = new Dice(6); // remember capitalization is important here
var d2 = new Dice(20);

This will however create 2 roll functions, which is correct but wastes memory since the function can be shared by doing:

Dice.prototype.roll = function() { /* return random awesomeness */ };

Hope that clarifies things

edited Aug 2, 2011 at 21:24

answered Aug 2, 2011 at 20:59

Pablo Fernandez

106k59 gold badges196 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Over a year ago

If he gave his first function a name and used it as a constructor there would be no difference though, right?

Pablo Fernandez Over a year ago

Yes there would be. The method won't be shared, you would be effectively creating a new function for each new object, wasting memory. There wouldn't be a difference in behavior though

Pablo Fernandez Over a year ago

@Michael could you edit your question with this extra code? It's hard to read (and answer) it here

Collectives™ on Stack Overflow

this.method = function(){} VS obj.prototype.method = function (){}

1 Answer 1

Dice Example

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Dice Example

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related