JS: Refactoring Code into OOP

Question

I coded an application that isn't entirely OOP. I was considering converting it to "real" OOP.

Right now, the code is structured by setting subfunctions as attributes to main functions.

Ex: Bullet.move.normal is a subfunction/dependency or Bullet.move.

This is how the code looks right now:

Bullet = function(x,y,angle,type){
    return {x:x,y:y,angle:angle,type:type};
}

Bullet.update = function(b){
    Bullet.move(b);
    Bullet.collision(b);
}

Bullet.move = function(b){
    if(b.type === 'normal') Bullet.move.normal(b);
    else if(b.type === 'sinus') Bullet.move.sinus(b);
}

Bullet.move.normal = function(b){
    b.x +=  Math.cos(b.angle);  b.y +=  Math.sin(b.angle);  //not important
}   
Bullet.move.sinus = function(b){
    b.x +=  Math.cos(b.x);  b.y +=  Math.sin(b.y); //not important
}   

Bullet.collision = function(b){
    Bullet.collision.wall(b);
    Bullet.collision.actor(b);
}

Bullet.collision.wall = function(b){} 
Bullet.collision.actor = function(b){}


---

I've started to write the OOP version of the code above but the structure I had doesn't work perfectly.

this parameter doesn't refer to the object if it's a "multilevel" function. (Check Bullet.prototype.move.normal)

What would be the recommended way to restructured the prototype without having to put all subfunctions in the main function? (Check 2nd Bullet.prototype.move)

Is there a solution other than just naming everything like Bullet.prototype.move_normal? I'd prefer to not have everything on the same "level".

And what would be the advantages of using OOP instead of what I had before? Is it worth converting to OOP?

Bullet = function(x,y,angle,type){
    this.x = x; 
    this.y = y;
    this.angle = angle;
    this.type = type;
}

Bullet.prototype.update = function(){
    this.move();
    this.collision();
}

Bullet.prototype.move = function(){
    if(this.type === 'normal') this.move.normal();
    else if(this.type === 'sinus') this.move.sinus();
}

Bullet.prototype.move.normal = function(){  
    //not working, this === Bullet.prototype.move, not the bullet
    this.x +=  Math.cos(this.angle);    //not important
    this.y +=  Math.sin(this.angle);    
}


Bullet.prototype.move = function(){ //I dont want this. I'd like to keep things separated.
    if(this.type === 'normal'){
        this.x +=  Math.cos(this.angle);
        this.y +=  Math.sin(this.angle);    
    }
    else if(this.type === 'sinus'){
        this.x +=  Math.cos(this.x);
        this.y +=  Math.sin(this.y);    
    }
}

You can't use multi-level hierarchy for your methods if you want to use the this pointer for the reason you discovered. All methods have to be only only one level down from the object or prototype. Simply change move.normal to moveNormal. — jfriend00
– jfriend00, Commented Jun 17, 2014 at 3:58
Is it the way people normally do things? Put all the functions and attributes on the same level? — RainingChain
– RainingChain, Commented Jun 17, 2014 at 4:08
Yes, that's the way people normally do things in javascript. For properties, there's no issue with going multiple levels. For methods, creating any extra levels creates this issue with the this pointer so methods on an object stay at one level. — jfriend00
– jfriend00, Commented Jun 17, 2014 at 4:52

merlin · Accepted Answer · 2014-06-17 06:24:30Z

1

Replace type code with subclasses would be a good starting point:

function extend(Parent, Child) {
    function Dummy () {}
    Dummy.prototype = Parent.prototype;
    Child.prototype = new Dummy();
    Child.prototype.constructor = Parent;
}

Bullet = function(x, y, angle, type){
    this.x = x;
    this.y = y;
    this.angle = angle;
    this.type = type;
};

Bullet.prototype.update = function(){
    this.move();
    this.collision();
};

Bullet.prototype.collision = function(b){
    this.collisionWall(b);
    this.collisionActor(b);
};

Bullet.prototype.collisionWall = function(b){};
Bullet.prototype.collisionActor = function(b){};

//NormalBullet
NormalBullet = function() {
    //Call parent constructor and pass all the arguments in.
    Bullet.apply(this, arguments);
};

//Set prototype inheritance.
extend(Bullet, NormalBullet);

//Move the bullet move logic into subclass.
NormalBullet.prototype.move = function() {
    this.x +=  Math.cos(this.angle);
    this.y +=  Math.sin(this.angle);
};

//SinusBullet
SinusBullet = function() {
    Bullet.apply(this, arguments);
};

extend(Bullet, SinusBullet);

SinusBullet.prototype.move = function() {
    this.x +=  Math.cos(this.x);
    this.y +=  Math.sin(this.y);
};

var sinusBullet = new SinusBullet(//your arguments);
sinusBullet.move();

var normalBullet = new NormalBullet(//your arguments);
normalBullet.move();

Source

edited Jun 17, 2014 at 6:24

answered Jun 17, 2014 at 4:13

merlin

341 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RainingChain Over a year ago

I'm not really looking to subdivide the class. I only showed a basic example where subdividing would be easy but it wouldn't work with the actual application. How would you code the collision part with that structure btw?

Bergi Over a year ago

Don't use new Bullet() for the prototype!

merlin Over a year ago

@RainingChain just move Bullet.collision.wall and Bullet.collision.actor one level up.

Collectives™ on Stack Overflow

JS: Refactoring Code into OOP

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related