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:

code:

---

function ExampleObject() {

  this.aField = "";

  this.method = function(param) {

    alert(param);

  }

}

---

Another, that I *think* accomplishes the same thing, is to use prototype:

code:

---

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

}

---

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]

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.

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:

code:

---

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?

---

[Jeff Mott]

//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... :P

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]

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]

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]

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

So, say, coding

code:

---

var Object = function() {

  this.name = "an object";

}

---

vs.

code:

---

function Object() {

  this.name = "an object";

}

---

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)