Why declare properties on the prototype for instance variables in JavaScript

Question

I'm trying to get my head around this black art called JavaScript - and, I must admit, pretty excited about it. I've been looking at code examples, mainly from "easeljs" since that is what I will be using mainly. And I'm a bit confused..

I (think I) understand the difference between using the prototype for functions or properties that are class variables and using this.someProp for 'instance' variables (Yes, I understand that there are no classes in JavaScript.)

The code I have looked at, and am using as templates for my own code, declare prototype variables and then refers to them with this i.e.

In the constructor:

this.name = name; 

Then a declaration:

Object.prototype.name; 

And later,

this.name = "Freddy"; 

This is within functions called with 'new' so in this case, as I understand it, this refers to the current object. What puzzles me is what the prototype declaration is doing and why do we use it for instance variables?

---

Clarification: In the following code, I don't see what the prototype declaration of radius is achieving:

(function(){     // constructor     function MyCircle(radius){         this.radius = radius;     }     MyCircle.prototype.radius;     this.area = function(){         return 3.14*this.radius*this.radius;     };     window.MyCircle = MyCircle; }()); 

Answer 1

The value on a prototype has a key behaviour that is different from a property set directly on the instance. Try this:

// Create a constructor function A() {}  // Add a prototype property A.prototype.name = "Freddy";  // Create two object instances from // the constructor var a = new A(); var b = new A();  // Both instances have the property // that we created on the prototype console.log(a.name); // Freddy console.log(b.name); // Freddy  // Now change the property on the // prototype A.prototype.name = "George";  // Both instances inherit the change. // Really they are just reading the // same property from the prototype // rather than their own property console.log(a.name); // George console.log(b.name); // George 

This would not possible without prototypical inheritance.

You can test whether the property is the instances property or the prototype property using the hasOwnProperty method.

console.log(a.hasOwnProperty("name")); // false 

An instance can override the prototype value.

b.name = "Chris"; console.log(b.hasOwnProperty("name")); // true console.log(a.name); // George console.log(b.name); // Chris 

And return to the prototype value.

delete b.name; console.log(b.hasOwnProperty("name")); // false console.log(b.name); // George 

This is a powerful part of prototypical inheritance.

In the other pattern:

function A() {   this.name = "George"; } 

The this.name variable is declared again with every new instance.

It makes some sense to have methods as functions declared on the prototype. Rather than the function definition being re-declared on every instance, all instances can share a single function.

In terms of variables, rather than functions, the prototype can possibly be used for default values in the case that an instance does not set its own value.

The code in a fiddle