javascript - 理解 javascript 这个作用域——用一个简单的 Backbone 例子

Question

看看这个 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给 setTimeout 时，将调用该函数并this绑定到全局对象，而不是您的对象。

如果 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);

Answer 2

看起来主干使用下划线的绑定功能，所以：

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

Answer 3

您还可以依靠_.bindAll实用程序方法来保持代码清洁和可重用。

initialize: function() {
    _.bindAll(this, 'myFunction')
    setInterval(this.myFunction, 1000)
},

myFunc: function() {
    console.log(this)
}