Javascript Prototypes,objects,constructor??i am confused

Question

I have gone through plenty of Stack Overflow question that had description but I seriously found them very confusing. What I want is a simple explanation,please don\'t refer

Answer 1

You're in luck. There's a very simple explanation:

Step One: Create an Object

Say you want to circle:

var circle = {};

Step Two: Give it Some Properties

A circle can be drawn, so let's create a property called draw:

circle.draw = function () {
    // drawing logic
};

1. A property is simply a variable belonging to an object. A variable by itself is not a property.
2. Properties and variables can hold any kind of data. Functions in JavaScript is data.
3. When a property holds a function it's called a method.

Hence we have a method called draw belonging to the object circle.

Step Three: Extend an Object

Now I want a ball and a ball is kind of like a circle. So let's extend circle to create a ball:

var ball = Object.create(circle);

1. Here we took the object circle and used it to create a new object called ball.
2. The object ball now has all the properties of circle. So we can call ball.draw.
3. The object circle is the prototype of ball.

Step Four: Give it Some Properties

Every ball has a radius, so let's give ours one:

ball.radius = 5;

Step Five: Create a Constructor

There's a problem here. Every time I want to create a new ball I extend circle and manually define the radius of the ball. Instead I would like a function to create the ball and give it a radius for me. This function is called a constructor:

function createBall(radius) {
    var ball = Object.create(circle);
    ball.radius = radius;
    return ball;
}

var baseball = createBall(5);
var basketball = createBall(10);

baseball.draw();
basketball.draw();

That's pretty much all you need to know about prototypes, objects and constructors.

Of course there's a lot more explanation but it's too much for one StackOverflow answer. I wrote a blog post on it, and I'm not planning to rewrite the same thing here. You should read my blog. It's worth it: http://aaditmshah.github.io/why-prototypal-inheritance-matters

---

Edit: Sure, I'll explain what happening in that code: http://cssdeck.com/labs/4ksohwya

First, scroll down to the very end:

window.addEventListener(
    'load',
    init(null),
    false);

When the page loads it executes init:

function init(images) {

    canvas= document.getElementById('s');
    ctx= canvas.getContext('2d');
    canvas.width= window.innerWidth;
    canvas.height=window.innerHeight;

    garden= new Garden();
    garden.initialize(canvas.width, canvas.height, 300);

    lerp(0,2000);

    time= new Date().getTime();
    interval = setInterval(_doit, 30);
}

The init function creates an instance of Garden (garden = new Garden();) and executes the initialize method of garden. It also calls the _doit function in intervals of 30 milliseconds.

initialize : function(width, height, size)  {
  this.width= width;
  this.height= height;
  this.grass= [];

  for(var i=0; i

The initialize method of garden then creates some instances of Grass, calls their initialize methods and stores them in an array.

function _doit()    {

  ctx.fillStyle= gradient;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  var ntime= new Date().getTime();
  var elapsed= ntime-time;
  garden.paint( ctx, elapsed );

  // lerp.
  if ( elapsed>nextLerpTime ) {
    lerpindex= Math.floor((elapsed-nextLerpTime)/nextLerpTime);
    if ( (elapsed-nextLerpTime)%nextLerpTime

The _doit function calls the paint function of garden, and the paint function of garden calls the paint function of each grass.

---

So here there are two constructors:

1. Grass
2. Garden

Here are the two prototypes:

1. Grass.prototype
2. Garden.prototype

Inside the init function we create a single instance of Garden (that's one object):

var garden= new Garden();

Inside the initialize method of garden we create multiple instances of Grass:

var g= new Grass();

That's it.