CODEWITHSUNDEEP
javascript
Maizere Pathak.Nepal
Maizere Pathak.Nepal

Reputation: 2411

Javascript looping through prototype

Please consider the code:

// define the GameObject constructor function

    var GameObject = function(width, height) {
    this.x = Math.floor((Math.random() * myCanvasWidth) + 1);
    this.y = Math.floor((Math.random() * myCanvasHeight) + 1);
    this.width = width;
    this.height = height;
    return this;
};

// (re)define the GameObject prototype object

GameObject.prototype = {
    x: 0,
    y: 0,
    width: 5,
    width: 5,
    draw: function() {
        myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
    }
};

We can then instantiate the GameObject 100 times.

var x = 100,
arrayOfGameObjects = [];
do {
    arrayOfGameObjects.push(new GameObject(10, 10));
    } while(x--);

Now we have an array of 100 GameObjects, which all share the same prototype and definition of the draw method, which drastically saves memory within the application.

When we call the draw method, it will reference the exact same function.

var GameLoop = function() {
    for(gameObject in arrayOfGameObjects) {
        gameObject.draw(); // this is my problem. Is this correct? gameObject is simply and index who draw() method gets executed
    }
};

My problem is with the last line code where method draw() is getting executed. Since gameObject is simply an Index, how can draw() method get executed? That index doesn't hold any object. It is simply an index right?

Here is a link

Upvotes: 0

Views: 211

Answers (4)

Juliet
Juliet

Reputation: 1050

var GameLoop = function() {
    for(var i = 0, len = arrayOfGameObjects.length; i<len; i++) {
        gameObject.draw();
    }
};

See this working on http://jsfiddle.net/SdBcx/2/

Some notes:

  • It is bad practice to use the for(obj in array) on Array objects. The reason why is, if you add a custom function to Array.prototype, the custom function will appear in your for loop! I've written an example of this here: http://jsfiddle.net/BUp6T/
  • You can see that I am saving the arrayOfGameObjects.length in the len variable. This happens only once, before the loop executes. This is significantly faster than the common solution which is: for(var i = 0; i < arrayOfGameObjects.length; i++) which retrieves the array length every single loop iteration.

Upvotes: 0

Jurijs Kastanovs
Jurijs Kastanovs

Reputation: 685

I like jquery $.each

$.each(arrayOfGameObjects, function(i, gObject) {
    gObject.draw();
});

Otherwise as described by others use for with iteration using array length.

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50229

Use a plain for loop to iterate through an array.

var GameLoop = function() {
    for (var i = 0; i < arrayOfGameObjects.length; i++) {
        arrayOfGameObjects[i].draw();
    }
};

It's actually bad practice to use a for in loop on an array since it's just a round about way to get the indexes that you want.

Upvotes: 0

BenM
BenM

Reputation: 53228

You should really use the following for your GameLoop:

var GameLoop = function() {
    for(var i = 0; i < arrayOfGameObjects.length; i++) {
        arrayOfGameObjects[i].draw();
    }
};

Upvotes: 1

Related Questions