2

我不是 JavaScript 的新手，但我经常发现它的灵活方式（比如将匿名函数定义为回调及其作用域）非常令人困惑。我仍在努力解决的一件事是闭包和作用域。

以这个例子（来自 Backbone 模型）为例：

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

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

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

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

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

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

谢谢！

4

1 回答 1

3

这是因为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 函数看起来像这样（源代码）：

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

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

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

this.view.$el.slideUp(400, _.bind(thisModel.view.remove, this) );
于 2013-02-09T10:12:19.157 回答