The Best Way To Create Reusable Objects in Javascript

Question

I have use the prototype and jQuery library. However I want to learn OOP JS more extensively. The kind of things I would like to do is create multiple instances of a JS object to run at the same time. In the example I am working with here, I want to create 7 different boxes to bounce around. I read the best way to create an object multiple times with using prototype. Here is a working script example I have created.

The problem I run into is if uncomment the "this.int = setInterval(this.move,20);", the I get an error that says it can't find "this.box.style.left" in the move function. It seems that the move function gets broken from the bounce object. I have tried everything I can think to make this work. I kind of need to have the int as a variable of the object so I can make a stop function to kill it.

like "bounce.prototype.stop = function() { clearInterval(this.int); });"

HTML

<body onload="dothis()">
<div id="case">
  <div class="boxclass" id="box1">BOX</div>
</div>
</body>

CSS

<style type="text/css">
    body {
        background-color: #3F9;
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    #case {
        background-color: #FFF;
        height: 240px;
        width: 480px;
        margin-right: auto;
        margin-bottom: 72px;
        position: relative;
        margin-top: 72px;
        margin-left: auto;
    }
    .boxclass {
        background-color: #F96;
        height: 36px;
        width: 36px;
        position: absolute;
    }
    </style>

JAVASCRIPT

<script type="text/javascript">
function bounce(frame,box,speed,x,y) {
     this.speed = speed;
     this.frame = frame;
     this.box = box;
     this.fw = frame.offsetWidth;
     this.fh = frame.offsetHeight;
     this.bx = x;
     this.by = y
     this.int = '';
     return this;

}
bounce.prototype.position = function () {   

    if (this.box.offsetLeft <= 0 && this.bx < 0) {
        console.log('LEFT');
        this.bx = -1 * this.bx;
    }
    if ((this.box.offsetLeft + this.box.offsetWidth) >= this.frame.offsetWidth) {
        console.log('RIGHT');
        this.bx = -1 * this.bx;
    }
    if (this.box.offsetTop <= 0 && this.by < 0) {
        console.log('TOP');
        this.y = -1 * this.y;
    }
    if ((this.box.offsetTop + this.box.offsetHeight) >= this.frame.offsetHeight) {
        console.log('BOTTOM');
        this.y = -1 * this.y;
    }
    return this;
}

bounce.prototype.move = function() {    
    this.box.style.left = this.box.offsetLeft + this.bx+"px";
    this.box.style.top = this.box.offsetTop + this.by+"px";
    //this.int = setInterval(this.move,20);
}

function dothis() {
    bn1 = new bounce( document.getElementById('case'), document.getElementById('box1'), 10,20,30).position();
    bn1.move();
}

</script>

jfriend00 · Accepted Answer · 2012-10-28 05:22:23Z

2

You are missing the context when you call this.move. Basically, in JS you need to pass the context for calling the method otherwise this.move will run in another context.

You can cache this pointer outside of SetInterval and use that to call it like this:

setInterval(function(context) {
    return function() {context.move(); } 
} )(this), 20);

OR this:

var that = this;
setInterval(function(){
    that.move();
}, 20);

edited Oct 28, 2012 at 5:22

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

answered Oct 28, 2012 at 4:45

albattran

1,9071 gold badge12 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

The Best Way To Create Reusable Objects in Javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related