CODEWITHSUNDEEP
javascript
user1638121
user1638121

Reputation: 167

Few Instance of object Javascript

I want to create a few instance of this class

var fruit = {
    texture: new Image(),
    speed: 5,
    x: 0,
    y: 0,
};
function fruits(speed, x, y) 
{
    fruit.speed = speed;
    fruit.x = x;
    fruit.y = y;
    return fruit;
};

but when i create new object the all value was overridet by last created object. How can i repair this? My loop:

var apples = [];

for(var i = 0; i < 10; i++)
{
    apples[i] = new fruits(5, Math.floor((Math.random()*775)+1), 0);
    apples[i].texture.src = "_img/apple.png";
}

Upvotes: 1

Views: 91

Answers (5)

sanchez
sanchez

Reputation: 4530

function Fruit( speed, x, y ){
    var fruit = {};   // or use some base object instead of {}

    fruit.texture = new Image();
    fruit.speed   = speed || 5;
    fruit.x       = x || 0;
    fruit.y       = y || 0;

    return fruit;
};

var apples = [];

for( var i=0; i<10; i++ ){        
    apples[i] = Fruit( 5, Math.floor((Math.random()*775)+1), 0 );
    apples[i].texture.src = "_img/apple.png";
}

Douglas Crockford - Power Constructor, 'new', 'this' and more

Upvotes: 2

Ivo Wetzel
Ivo Wetzel

Reputation: 46745

You got an object here:

var fruit = {
    texture: new Image(),
    speed: 5,
    x: 0,
    y: 0, // Note the superflous comma, which might break the code in some IE versions
};

And a function here:

function fruits(speed, x, y)  {
    fruit.speed = speed;
    fruit.x = x;
    fruit.y = y;
    return fruit;
};

The function modifies above object whenever it is called and returns it.

Now, what you want is a constructor, but you don't have one here.

This, would be a constructor for a new Fruit:

function Fruit(speed, x, y) {
    this.texture = new Image();
    this.speed = speed || 5; // Note: Using logical OR to emulate default values for the argument
    this.x = x || 0;
    this.y = y || 0;

    // Note: There is no return here!
}

var a = new Fruit(2, 1, 10);
var b = new Fruit(4, 10, 20);
a === b; // Returns false, you got two instances :)

new may have the functionality of being able to create instances of a Function, but you can still override this behavior by returning manually from within the constructor Function.

Also, even if you left out the return fruit in your original code, you would get back an empty instance of fruits since you don't assign any properties to the newly created instance.

In my Fruit example I reference the instance object via the this keyword, so I can assign speed, image, x and y to each instance created.

You might also want to read:

Upvotes: 1

eugene82
eugene82

Reputation: 8822

Try such constructor:

function Fruit(speed, x, y) {
    return {
        speed: speed,
        x: x,
        y: y
    }
}

alert(new Fruit("mySpeed", 1, 2).speed);

Upvotes: 0

Dave
Dave

Reputation: 46249

The other answers which are appearing here are just bizarre. Here's the solution:

function fruits(speed, x, y) 
{
    this.texture = new Image( );
    this.speed = speed;
    this.x = x;
    this.y = y;
};

Notice that the keyword this is used to set attributes. That means that when you call

var apple = new fruits( blah blah );

then apple will be set to a new object which has texture, speed, x and y attributes. There is no need to reference some global object to store these; they are stored in the newly created object itself.

Also I would rename it; the convention is to use singular names and a capital first letter for objects, so Fruit would make more sense (allowing new Fruit(...))

Upvotes: 2

vz_
vz_

Reputation: 482

function fruits(speed, x, y) {
    return {
        texture: new Image(),
        speed: speed,
        x: x,
        y: x,
    }
};

Upvotes: 0

Related Questions