javascript - 了解 javascript 的范围界定 - 通过一个简单的 Backbone 示例

Question

看看this jsFiddle

下面还列出了代码:

window.MyView = Backbone.View.extend({

ticks: 0,
initialize: function() {
    //window.setInterval(this.onTimerTick, 1000); // arghhh.. can't understand the 'this' scoping       
    window.setInterval(this.onTimerTick2, 1000);  // Works great with globals       
},

render: function() {
    this.$el.text(this.ticks);            
},

onTimerTick: function() {  // Trouble with this
    this.ticks++;
    this.render();
},

onTimerTick2: function() {  // Using globals
    window.ticks2++;
    $('#count').text(window.ticks2);
}
});

window.My = new MyView({ el: $("#count") });
window.ticks2 = 0;

看一下代码，你会发现我想使用onTimerTick函数，但是因为我不知道如何从window-this到My-this，所以我必须使用onTimerTick2中看到的方法。 (通常我会使用 that=this，但在这种情况下这是不够的)

感谢您为让我理解这一点所做的任何尝试(!)

谢谢

拉尔西

Answer 1

经过this.onTimerTick2时要设置超时，将使用 this 调用该函数绑定(bind)到全局对象，而不是您的对象。

如果 underscore.js 可用(根据 @ori 是这样)，您可以使用 _.bind()锁定this调用时指向正确的对象:

window.setInterval(_.bind(this.onTimerTick, this), 1000);

以下是一些不依赖于库的解决方案:

// Works in all browsers
var self = this;
window.setInterval(function() {
    self.onTimerTick();
}, 1000);

使用现代 JS 引擎，您还可以使用 Function.bind() 保持正确this :

// Requires a modern JS engine
window.setInterval(this.onTimerTick.bind(this), 1000);