Still confused with js Prototype

Question

I am confused with what prototype actually does. I am learning HTML canvas right now and for one of the examples, it uses prototype to declare the draw method. But whats the difference between using prototype versus simply putting it in the constructor function itself?

Isn't this example from the book:

function Ball (radius, color) {
 if (radius === undefined) { radius = 40; }
 if (color === undefined) { color = "#ff0000"; }
 this.x = 0;
 this.y = 0;
 this.radius = radius;
 this.rotation = 0;
 this.scaleX = 1;
 this.scaleY = 1;
 this.color = utils.parseColor(color);
 this.lineWidth = 1;
 }
Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};

The same as putting this in?:

function Ball(radius, color){
...
this.draw = function (context) {
 context.save();
 context.translate(this.x, this.y);
 context.rotate(this.rotation);
 context.scale(this.scaleX, this.scaleY);
 context.lineWidth = this.lineWidth;
 context.fillStyle = this.color;
 context.beginPath();
 //x, y, radius, start_angle, end_angle, anti-clockwise
 context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
 context.closePath();
 context.fill();
 if (this.lineWidth > 0) {
 context.stroke();
 }
 context.restore();
 };
}

• Zirak: Same result, different performance. Each time you instantiate Ball, the function has to be re-declared

Answer 1

prototype is an Object shared by all other objects who take it as prototype, which results in that methods added to prototype dynamically can be shared by all instances.

function ClassA(){
 this.sayHello = function(){
 return "hello!";
 }
}
var instanceA = new ClassA();
instanceA.sayHello();//return "hello!";
//add a method to instanceA
instanceA.sayBye = function(){ return "Bye!"; }
var instanceB = new ClassA();
instanceB.sayBye(); //error, sayBye is not a method of instanceB.
//But, this really works
ClassA.prototype.sayBye = function(){ return "Bye!"; }

And, since all instance share the single prototype, all methods only stay in one place in memory. In your second implementation, each instance has its own method, which resulting in a lot of memory using.

Keeping method out of the definition of Class makes code more clean and readable, although this is not a strong evidence .

With prototype, it's more easy for developers to write code in OOP style.

 function ClassB(){
 }
 ClassB.prototype = new ClassA();
 // The equivalent approach may be this
 function ClassB(){
 ClassA.apply(this);
 }

Both of the two approaches can do the same jobs, so choose any one you like.

Answer 2

there is not too much difference. The main difference is that, methods created via prototype can't access to the private members of the object.

function Ball (radius, color) {
 if (radius === undefined) { radius = 40; }
 if (color === undefined) { color = "#ff0000"; }
 this.x = 0;
 this.y = 0;
 this.radius = radius;
 this.rotation = 0;
 this.scaleX = 1;
 this.scaleY = 1;
 this.color = utils.parseColor(color);
 this.lineWidth = 1;
 var privateVar = 0;
 function privateFunction() {
 // anything
 }
}
Ball.prototype.draw = function() {
 privateFunction(); // doesn't work.
 privateVar = 2; // doesn't work
 this.lineWidth = 2; // this will work.
};

• Ashwin Prabhu: Closures is not what the OP is asking for.