はJavaScriptにこのスコープを理解する - 簡単なバックボーンの例で

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機能を使用したい参照ウィンドウからどうやって取得するのか分からないので、これをMy-thisにすると、onTimerTick2で見られるアプローチを使用する必要があります。私はこの（！）

おかげ

Larsi

Answer 1

を理解させるために、任意attemtため

おかげで（通常、私はこれを=それに周りを取得、この場合には、それは十分ではありません） this.onTimerTick2をsetTimeoutに渡すと、オブジェクトはグローバルオブジェクトにバインドされたthisで呼び出されます。 underscore.jsが利用可能である場合に呼び出されたときに

（それが@oriによる）、あなたは正しいオブジェクトにthisをロックする_.bind()を使用することができます。ここでは

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

が依存していないいくつかのソリューションです図書館：あなたも正しい thisを維持するために Function.bind()を使用することができます現代のJSエンジンと

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

：

それは背骨のように見える

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

Answer 2

ので、アンダースコアからbind機能を使用しています。あなたはまた、_.bindAllユーティリティメソッドに依存することができ、コードクリーナーと再利用可能なを保つために

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

Answer 3

。

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

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