javascript - jQuery 动画回调 + 主干 : Cannot call method 'remove' of undefined

Question

我不是 JavaScript 的新手，但我经常发现它的灵活方式(比如将匿名函数定义为回调及其范围)非常令人困惑。我仍在苦苦挣扎的一件事是闭包和作用域。

以这个例子为例(来自 Backbone 模型):

'handleRemove': function() {
    var thisModel = this;
    this.view.$el.slideUp(400, function() { thisModel.view.remove(); });
},

模型被移除/删除后，这将为其 View 设置动画并最终将其从 DOM 中移除。这工作得很好 - 但最初我尝试了以下代码:

'handleRemove': function() {
    var thisModel = this;
    this.view.$el.slideUp(400, thisModel.view.remove );
},

这基本相同，但没有用于 remove() 调用的 function() {} 包装器。

有人可以解释为什么后面的代码不起作用吗？我得到以下异常/回溯:

Uncaught TypeError: Cannot call method 'remove' of undefined backbone-min.js:1272
_.extend.remove backbone-min.js:1272
jQuery.speed.opt.complete jquery-1.8.3.js:9154
jQuery.Callbacks.fire jquery-1.8.3.js:974
jQuery.Callbacks.self.fireWith jquery-1.8.3.js:1084
tick jquery-1.8.3.js:8653
jQuery.fx.tick

谢谢!

Answer 1

那是因为回调函数的上下文 (this) 更改为由 jQuery 设置动画的元素。

var obj = { fn: function() {         // Used as below, the following will print:
                alert(this === obj); // false
                alert(this.tagName); // "DIV"
          }};
$('<div>').slideUp(400, obj.fn);

此外，Backbone 的 view.remove 函数如下所示 (source code):

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
},

因为 this 不再是 Backbone View 对象，所以 $el 没有定义。因此，您会收到“无法调用未定义的方法‘删除’”错误。

另一种避免错误的方法是使用下划线的 _.bind方法:

this.view.$el.slideUp(400, _.bind(thisModel.view.remove, this) );