Using object.prototype vs declaring functions in a constructor

This site is best viewed in a modern browser with JavaScript enabled.

Using object.prototype vs declaring functions in a constructor

snowguy13

I've recently begin delving much more into JavaScript and have realized that what I thought I knew before was not very much. That being said, I've programmed some Java so naturally when I came to JavaScript I wanted to understand how to create objects.

As I dug, I came across two different ways to declare methods and fields for all objects. One of them is to declare them in the constructor:
[colorcode=JavaScript]
function ExampleObject() {
this.aField = "";
this.method = function(param) {
alert(param);
}
}
[/colorcode]

Another, that I think accomplishes the same thing, is to use prototype:
[colorcode=JavaScript]
function ExampleObject() {}
//this would have to be defined outside of the constructor, in this case
ExampleObject.prototype.aField = "";
ExampleObject.prototype.method = function(param) {
alert(param);
}
[/colorcode]

Now, please bear with me as a launch an onslaught of questions, as I've only been nursing my understanding for a couple days now:
1) Do these two code snippets accomplish the same thing? If not, what is the difference and why does it occur? If so, is one way better, faster, or more universally accepted?
2) Does using prototype retain the reference of the this keyword? In other words, if I referred to "this.aField" in the prototype method declaration, would JavaScript know to refer to an ExampleObject's "aField" field?

...and I think I'll stop there...

Jeff_Mott

snowguy13;1212461 wrote:
1) Do these two code snippets accomplish the same thing? If not, what is the difference and why does it occur? If so, is one way better, faster, or more universally accepted?

On the surface, they will both accomplish the same thing. The difference is that when you declare methods in the constructor, then a new copy of each method/function is created for every new instance. Attaching the method to the prototype, on the other hand, creates just one copy of the method/function that is shared across all instances. Using the prototype is better and more universally accepted, though your application would have to grow quite large before you notice any difference.

snowguy13;1212461 wrote:
2) Does using prototype retain the reference of the this keyword? In other words, if I referred to "this.aField" in the prototype method declaration, would JavaScript know to refer to an ExampleObject's "aField" field?

Yup.

snowguy13

Okay, thank you!

snowguy13

I've got a follow up question:

I can see how defining methods in a constructor can take extra time, as each function must be created for every instantiation. However, what about fields? Should I define fields using the prototype, or is the constructor okay?

Jeff_Mott

If each instance should have its own copy of some field, which is the case most of the time, then you should declare it in the constructor. Fields set in the prototype will be shared across all instances.

snowguy13

OOOOOOOOOOOOOOOOO ... five hours later ... OOOOOOOHHHHHH!

Finally, I think I'm beginning to understand the prototype. I wish it didn't take explanations from five different sites. xD

Thank you very much.

To check my understanding:

[colorcode=javascript]
function Object() {}
Object.prototype.field = "hi";

var o1 = new Object();
alert(o1.field); //alerts "hi"
var o2 = new Object();
o2.field = "bye";
alert(o1.field); //this would be "bye", right?
//Or would it still be "hi", since setting a value to o2.field hides the prototypical field
//and creates a field unique to o2?
[/colorcode]

Jeff_Mott

snowguy13;1212565 wrote:
//Or would it still be "hi", since setting a value to o2.field hides the prototypical field
//and creates a field unique to o2?

That one.

snowguy13

Okay. I think I'm starting to like JavaScript, even though it makes every bone in my Java-programming body ache...

Thank you very much!

maurycy

maybe it's just me but I like to keep my objects out of global scope

var Person = function () {
    this.firstname = "Ninja";
    this.surname = "Turtle";
	this.offspring;
};

Person.prototype = {
    multiply: function () {
        this.offspring = this.firstname + ' Jr.' + this.surname;
    },
    findFemale: function (femaleName) {
        this.multiply();
		return this.offspring;
    }
};

var x = new Person;
x.findFemale();

svidgen

Jeff Mott;1212466 wrote:
On the surface, they will both accomplish the same thing. The difference is that when you declare methods in the constructor, then a new copy of each method/function is created for every new instance. Attaching the method to the prototype, on the other hand, creates just one copy of the method/function that is shared across all instances. Using the prototype is better and more universally accepted, though your application would have to grow quite large before you notice any difference.

I tend to disagree. It depends firstly on your object instantiation to object usage ratio. That is, it's a question of where you want to take your performance hit: The prototypal pattern places the hit at method-call time, whereas the "build-it-on-the-fly" approach places the hit at instantiation time.

If performance isn't an issue for your application, the "better" one is simply whichever looks better, is easier to read, and therefore maintain. In my opinion, that's not the prototypal route.

snowguy13

maurycy;1212688 wrote:
maybe it's just me but I like to keep my objects out of global scope

But wait... If the point of a certain function is to act as a constructor for an object, why would you want to limit the scope of that constructor?

maurycy

I mean keep it away from users access, nothing should be defined in global scope

snowguy13

maurycy;1212812 wrote:
I mean keep it away from users access, nothing should be defined in global scope

So, say, coding
[COLORCODE=javascript]
var Object = function() {
this.name = "an object";
}
[/COLORCODE]

vs.

[COLORCODE=javascript]
function Object() {
this.name = "an object";
}
[/COLORCODE]

would limit the scope of the object Object?

maurycy

It's not limiting that object it's limiting access to it from 3rd party (user parasites)