JS prototyping n-ary method

Question

the thing is i got a JS class and want to create a n-ary method to its prototype (Whisp.prototype.draw) so it won't be instanced over and over again. What my browser console tells me is

Uncaught TypeError: w.draw is not a function

I probably misunderstood something about prototyping in JS, so here is the relevant part of code:

// Random generators

function randomInt(min, max)
{
    return Math.floor(Math.random() * (max - min)) + min;
}

// Whisp object + its methods

var WHISP_TURN_CAP = 10, WHISP_WANDER_CAP = 2, WHISP_SIZE = 2,
    WHISP_COUNT = 4;

var Whisp = function(position)
{
    this.rotation = [];
    this.position = position;

    for (var i = 0; i < 3; i++)
        this.rotation.push(randomInt(-WHISP_TURN_CAP, WHISP_TURN_CAP))
    this.rotation.push(1)
}

Whisp.prototype.wander = function()
{
    var angle;
    for (var i = 0; i < 3; i++)
    {
        angle = randomInt(-WHISP_WANDER_CAP, WHISP_WANDER_CAP+1);
        while (Math.abs(this.rotation[i] + angle) > WHISP_TURN_CAP)
            angle = randomInt(-WHISP_WANDER_CAP, WHISP_WANDER_CAP+1);
        this.rotation[i] += angle;
        this.position = matrixProduct(this.position, i, this.rotation[i]);
    }
};

Whisp.prototype.draw = function(center)
{
    context.setFill('#60FF55');
    context.fillOval(
            center[0]+this.position[0]-WHISP_SIZE,
            center[1]+this.position[1]-WHISP_SIZE,
            center[0]+this.position[0]+WHISP_SIZE,
            center[1]+this.position[1]+WHISP_SIZE
        );
};

// Generate actual whisps

var whisps = [];
for (var i = 0; i < WHISP_COUNT; i++)
    whisps.push(new Whisp([800,400,0,1]));

// Update function (drawing onto canvas)

var canvas = $('#backgroundCanvas')[0], context = canvas.getContext('2d');

function update()
{
    for (var w in whisps)
    {
        w.draw([800,450]);
        w.wander();
    }
    console.log('update();');
    window.setTimeout(update, 20);
}
var whisps = [];
for (var i = 0; i < WHISP_COUNT; i++)
    whisps.push(new Whisp([800,400,0,1]));

// Update function (drawing onto canvas)

var canvas = $('#backgroundCanvas')[0], context = canvas.getContext('2d');

function update()
{
    for (var w in whisps)
    {
        w.draw([800,450]);
        w.wander();
    }
    console.log('update();');
    window.setTimeout(update, 20);
}

update();

all of it encased in $(document).ready(function(){ ... }). Thanks for your answers :).

score 1 · Accepted Answer · edited May 23 '17 at 11:43

You should avoid using for ...in with arrays, as it doesn't iterate over undefined indices and doesn't guarantee to iterate the array in order.
See: Why is using "for...in" with array iteration a bad idea?

However the issue here is that w stores the key of the item in the array in:

for (var w in whisps)
{
    w.draw([800,450]);
    w.wander();
}

Where it should be:

for (var w in whisps)
{
    whisps[w].draw([800,450]);
    whisps[w].wander();
}

Or even better:

for (var i = 0; i < whisps.length; i++) {
    whisps[i].draw([800,450]);
    whisps[i].wander();
}

It's also generally faster: Javascript for..in vs for loop performance

I notice you are using canvas so don't care about IE8, in which case Array.prototype.forEach() is another solution which I prefer as it creates a new scope for the iteration:

whisps.forEach(function(w) {
    w.draw([800,450]);
    w.wander();
});

ohh, didnt know that, thought it worked like in other languages (the elements of array get picked into w), thanks very much :) — Kubo Motýľ, Jul 11 '15 at 18:04
@KuboMotýľ If you don't care about IE8 (you're using canvas so I assume not) you can use [Array.prototype.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) — George Reith, Jul 11 '15 at 18:13

JS prototyping n-ary method

1 Answers1