Difference between this property and prototype property?

[LiveFree]

Can someone tell me the difference between having a property declared on the function level or the prototype level? They both seem to work the same to me...

If I create two Persons (see below) and change the firstName on one of them, it updates only that instance of the person (as expected), and not the other, no matter the implementation (this or prototype), so why choose one or the other? Or does it matter?

Example:

var Person = function() {
      this.firstName = "bob";
}

or

var Person = function(){};
Person.prototype.firstName = "bob";

Run either implementation returns the same result.

function Test() {
      var p1 = new Person();
      var p2 = new Person();
      p1.firstName = "jane";
      alert(p1.firstName); //bob
      alert(p2.firstName); //jane;
}

Thanks for the help!

[Philip M]

The two codes are functionally the same.

As we often say here, there are several different ways of killing a cat. In many instances there is no discernable advantage of using one over another.

Quizmaster: What is the only prime number between 60 and 65?
Contestant: 50.

[LiveFree]

My understanding is that prototype reduces memory by not cloning methods to classes implementing that prototype.

How does that work with properties like in this example? Does it copy non-functions to the instance object? It seems like it does, but I'm kind of a newbie so I'm unsure...

[felgall]

When you define a property directly on the object the prototype property becomes inaccessible (unless you specifically reference it via the prototype).

If you don't define the property directly (or delete the direct property) then the prototype property with the same name will be accessed instead.

var Person = function(){};
Person.prototype.firstName = "bob";
function Test() {
      var p1 = new Person();
      var p2 = new Person();
      p2.firstName = "jane";
      alert(p1.firstName); //bob - reference to prototype
      alert(p2.firstName); //jane - direct reference
      delete p2.firstName;
      alert(p2.firstName); //bob - reference to prototype
}

The prototype property occurs once regardless of how many objects use it. The individual objects can either have their own copy defined or use the prototype one.

[AndrewGSW]

I think it should be

p2.firstName = "jane";

for the above example.

[LiveFree]

Ah, thank you for the help

[rnd me]

Originally Posted by LiveFree

My understanding is that prototype reduces memory by not cloning methods to classes implementing that prototype.

How does that work with properties like in this example? Does it copy non-functions to the instance object? It seems like it does, but I'm kind of a newbie so I'm unsure...

i like to think of prototypes as globals and this as a local.
prototype.x is the exact same object for all, this.x is specific to the function executing the code.

[Logic Ali]

Originally Posted by rnd me

prototype.x is the exact same object for all, this.x is specific to the function executing the code.

Don't you mean the instance of the object executing the code?

[Old Pedant]

If we were using a class-oriented language, you would say that the prototype properties are static properties. But then class-oriented languages don't let you add properties to individual objects, so the analogy quickly breaks down.

It's kind of funny, back in 1995 when I was helping build a combination C++/Java development system/compiler (yeah, I know...Java *compiler*?), the compiler guru that was guiding the thing had the idea of adding the ability to Java (and C++!) to dynamically add properties to objects (not classes). We ended up deciding that we could add it later, but then the product died. Too bad. If we'd pulled it off then we'd have had a language that was both class-oriented and object-oriented. (The sad part is it wouldn't have really been all that hard to do. The base Object class would have had methods addProperty and addMethod, very similar to, say, the DOM's setAttribute concept.)

[Old Pedant]

Originally Posted by Logic Ali

Don't you mean the instance of the object executing the code?

But functions are objects in JavaScript.

[I just had to throw that in. Purely tongue in cheek.]

[rnd me]

Originally Posted by rnd me

prototype.x is the exact same object for all, this.x is specific to the function executing the code.

Originally Posted by Logic Ali

Don't you mean the instance of the object executing the code?

no. well, if you are directly invoking a function as a method of an object created using "new ", then this will equal the object instance, as you note. that's true, but i was alluding to more.

this is defined by the function's activation context, which means .call(), .apply(), .bind(), and even [1,2,3].map( fn , thisObject ) can all set what this means.


you can use this to make lightweight prototype-less 'instances' by applying a Constructor instead of using new:

function Person() {
      this.firstName = "bob";
}

Person.prototype.age=123;

var o={};
Person.call(o);


alert([o.firstName, o.age ]); //shows: "bob," (no age)

[Old Pedant]

Oogle. You do like to explore the edges, don't you. But, yes, that all makes perfect sense. Thanks.