Constructor and prototypes in javascript

Question

I'm reading a snippet of code that defines a constuctor

var Resource = function(data) {
    angular.extend(this, data);
}

and then subsequently defines a method to it.

Resource.query = function(url) {
    console.log(url);
}

Can I ask how this works? I know functions are objects as well, and is this the equivalent of the following? But if so, then what happens to the constructor function?

var data = {};
data.query = function(url) {
    console.log(url);
}

Also, why wouldn't we simply define it on the prototype instead?

Resource.prototype.query = function(url) {
    console.log(url);
}

http://jsfiddle.net/HPg6A/

@ElliottFrisch It's not exactly a duplicate in my opinion. The question is more about static vs non-static functions. — plalx
– plalx, Commented Mar 9, 2014 at 4:08

plalx · Accepted Answer · 2014-03-09 04:24:03Z

2

You would define methods on the prototype only if they are meant to be called on specific instances. When methods are defined directly as constructor members, it's usually to mimic static methods.

Basically, when a method relates very closely to a class, but doesn't make much sense as an instance method, it can be implemented as a static method.

I think that you will agree with me that the second example makes more sense and if you do, you already understood the difference.

1-

var user = new User();

user.findUser('somequery').then(...);

2-

User.findUser('somequery').then(...);

edited Mar 9, 2014 at 4:24

answered Mar 9, 2014 at 4:15

plalx

43.8k7 gold badges77 silver badges94 bronze badges

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

4 Comments

Dan Tang Over a year ago

Thank you for this, and that makes sense, and is basically just a way of implementing static methods. My other question is on the way it is defined - how is it that we can do "Resource.query = function(xxx){}" when we have already defined "Resource" as a function? Wouldn't defining "Resource = {}; Resource.init = function(){}; Resource.query = function(){}" be better?

plalx Over a year ago

@DanTang No because you also want Resource to be a constructor function. If you do Resource = {}, how will you create new Resource instances? Functions are objects just like any other objects.

Dan Tang Over a year ago

Ah okay, that makes sense! Can I ask one last question - I'm assuming "this" refers to the instance created from the constructor and thus static methods cannot reference it? So any functions defined on Resource can only access "static" variables on Resource (e.g. Resource.count) and variables on any outer scopes?

plalx Over a year ago

@DanTang Well, there's no real static concept in JS so you do not have the same restrictions some other languages may have for static members, however you are right that this will not point to an instance of Resource inside a static method, it would point to the Resource constructor. Besides this, there's technically nothing that prevents the code that runs inside Resource.someMethod to access whatever it wants to access. For example, if you declare a global variable var r = new Resource();, nothing would prevent the code from accessing r.

Wayne · Accepted Answer · 2014-03-09 04:22:31Z

I know functions are objects as well, and is this the equivalent of the following

There's nothing more to what you say. It's just like any other property on any other object.

Also, why wouldn't we simply define it on the prototype instead?

The difference is that each object created using the constructor would then have that method in their prototype chain. This isn't true for properties defined on the constructor itself.

That is:

var Resource = function() {}
Resource.one = function() {
    console.log("one");
}
Resource.prototype.two = function() {
    console.log("two");
}

var r = new Resource();
r.two(); // => "two"
r.one(); // => TypeError: r.one is not a function

And:

Resource.one(); // => "one"
Resource.two(); // => TypeError: Resource.two is not a function

You might call one a static method, but the language doesn't treat it differently than any other function (unlike methods defined using, say, static in Java).

Collectives™ on Stack Overflow

Constructor and prototypes in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related