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

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.