javascript - Object构造函数和TypeError中的递归函数

Question

鉴于以下 <img id="f1" src="img/fish1.gif"> ，我创建了一个对象构造函数，如下所示(缩小代码用于演示目的):

$(function(){
  function fish(i){

    this.f = $('#f'+i)[0];
    this.d = '-=1px';

    this.animateFish = function(){
      $(this.f).animate({"left": this.d} ,10, "linear", this.checkCollision);
    }

    this.checkCollision = function(){
      this.animateFish();   //TypeError: this.animateFish is not a function
    }
  }

  var f1 = new fish(1);
  f1.animateFish();
})

我应该为 img 制作动画(在这种情况下为#f1)，检查碰撞然后调用 this.animate抛出上述错误，任何修复？

Answer 1

在 animate() 的回调函数中，this 将引用被动画化的元素，而不是 fish 对象。因此调用 this.animateFish() 会给你一个 function not found 错误。

要解决此问题，请将对 fish 对象的引用存储在事件处理程序范围内的变量中，然后您可以在事件处理程序中使用该变量。试试这个:

function fish(i) {
  var _this = this;
  _this.$f = $('#f' + i);
  _this.d = '-=1px';

  _this.animateFish = function() {
    _this.$f.animate({ "left": _this.d }, 10, "linear", _this.checkCollision);
  }

  _this.checkCollision = function() {
    _this.animateFish();
  }
}