CODEWITHSUNDEEP
javascriptfunctionobject
Michael Jasper
Michael Jasper

Reputation: 8068

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

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)?

Upvotes: 3

Views: 2613

Answers (1)

Pablo Fernandez
Pablo Fernandez

Reputation: 105258

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

Upvotes: 13

Related Questions