キーワード "this" in jQuery対MVC

Question

キーワード "this"を使用するか、またはjQuery対してBackboneのようなMVCフレームワークで表現することの違いを理解しようとしています。

以下はそれぞれ2つのコードサンプルです。 だからjQueryのでは、我々は骨格中

$("#result").click(function(){ 
$(this).html(someval); 
}) 

を持って、我々は、ようなコードを持っています。

var HandlebarsView = Backbone.View.extend({ 
el: '#result' 
initialize: function(){ 
this.template = Handlebars.compile($('#template').html());  
}, 
render: function(){ 
var html = this.template(this.model.toJSON()); 
this.$el.html(html); 
} 
}); 

ここで、「this」はjQueryのDOM要素を指していることがわかります。

バックボーンコードの場合の表現を理解したかったと思います。

お知らせください。

Answer 1

thisは、関数が実行されるコンテキストです。

理解の秘訣thisは、それを決定する関数を実行する方法であることを理解しています。

jQueryのようなメソッドに関数を渡すときは、その関数をコールバックメソッドとして使用しています。 jQueryは、実行時にコールバックのコンテキストを明示的に設定します。

ドット表記を使用してオブジェクトのメソッドを呼び出すと、myView.render()は、ドットの前のオブジェクトへのメソッド呼び出しのコンテキストを明示的に設定するドット表記です。

コンテキストがどのように設定されているかのルールは、JavaScriptでは非常に簡単ですが、混乱を招く可能性があります。ほとんどの言語は、自己参照コンテキスト変数をメソッドが定義されているオブジェクトに設定します。ただし、JavaScriptではメソッド呼び出しパターンを使用してコンテキストを判別します。

オブジェクトのメソッドをコールバックメソッドとして渡すと、それを呼び出すコードがメソッドのコンテキストを設定します。これには、バックボーンのビューやその他のオブジェクトが含まれます。 Underscore.jsのbindとbindAll関数（http://documentcloud.github.com/underscore/#bind）を使用して明示的にこれをオーバーライドすることができます。

Backbone.View.extend({ 
    initialize: function(){ 
    _.bindAll(this); 
    } 
}); 

このコードは、たとえば、現在のビューオブジェクトのすべての関数のコンテキストをビューにバインドします。これにより、ビューメソッドのコンテキストが常にビュー自体になることが保証されます。詳細情報については

は、以下を参照してください。

• http://es5.github.com/ - 注釈付きES5仕様
• http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
• http://lostechies.com/derickbailey/2011/06/15/solving-backbones-this-model-view-problem-with-underscore-js/
• http://www.watchmecode.net/javascript-context（私自身のスクリーンキャストは、すべてのルールをカバーし、その使用方法 - 有料のスクリーンキャストを）

Answer 2

ビュー内の 'this'は、現在のビューオブジェクトを参照します。モデルでは、 'this'は現在のモデルオブジェクトを参照します。同様に、コレクションの場合、 'this'は現在のコレクションオブジェクトを参照します。

しかし、ビュー 'this'は、jQueryとビューオブジェクトによって選択されたdom要素間に一時的なものです。そのため、私たちが呼び出しているときに 'this'が現在のビューオブジェクトのままであるように_.bindAll関数を使用する理由です。 「レンダリング」などの特定の機能を参照してください。http://documentcloud.github.com/underscore/#bindAll