javascript - this.method = function(){} VS obj.prototype.method = function (){} - Stack Overflow

admin管理员组

文章数量:1301548

As a c#/ 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 acplish the same functionality this way:

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

Example: Reddit Chrome Extension

Both ways seem to acplish 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)?

As a c#/ 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 acplish the same functionality this way:

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

Example: Reddit Chrome Extension

Both ways seem to acplish 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)?

• javascript
• function
• object

Share Follow edited Aug 2, 2011 at 21:16 Michael Jasper asked Aug 2, 2011 at 20:56 Michael JasperMichael Jasper 8,06844 gold badges4343 silver badges6060 bronze badges 2

• possible duplicate of Use of 'prototype' vs. 'this' in Javascript? – Pablo Fernandez Commented Aug 2, 2011 at 21:12
• 1 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 Commented Aug 2, 2011 at 21:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 mon, 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 oute 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

本文标签： javascriptthismethodfunction() VS objprototypemethodfunction ()Stack Overflow