1

我使用了原型和 jQuery 库。但是我想更广泛地学习 OOP JS。我想做的事情是创建一个 JS 对象的多个实例以同时运行。在我在这里使用的示例中，我想创建 7 个不同的盒子来反弹。我阅读了使用原型多次创建对象的最佳方法。这是我创建的一个工作脚本示例。

我遇到的问题是如果取消注释“this.int = setInterval(this.move,20);”，我会收到一条错误消息，指出在移动函数中找不到“this.box.style.left” . 似乎移动功能从反弹对象中被破坏了。我已经尝试了我能想到的一切来完成这项工作。我有点需要将 int 作为对象的变量，这样我就可以创建一个停止函数来杀死它。

像“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>
4

1 回答 1

2

当您调用 this.move 时，您会丢失上下文。基本上，在 JS 中，您需要传递调用方法的上下文，否则 this.move 将在另一个上下文中运行。

您可以将此指针缓存在 SetInterval 之外，并使用它来调用它，如下所示：

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

或这个：

var that = this;
setInterval(function(){
    that.move();
}, 20);
于 2012-10-28T04:45:22.120 回答