1

私はjqueryとjavascriptに非常に慣れていません。Splunk がモジュールのいくつかをどのように実装しているかを調べていて、混乱しました。

これは、多くのものを省略したサンプルコードです。

this.input.bind("focus",this.onInputFocus.bind(this))

this.input は、SearchBar に使用されるテキスト ボックスを参照します。その後、ファイル内で onInputFocus が宣言されます

onInputFocus: function(evt) {
   ...
   ...
   return true
},

「this.input.bind」ステートメントは、人がテキストボックスをクリックしたときに onInputFocus を実行するようにブラウザーに指示することは知っていますが、イベントハンドラーの最後にある .bind(this) を理解していません。何が起こっているのか理解できるように、この表記法を説明してください。

4

1 に答える 1

1

「外側」は、 jQuery を使用bindしてイベント ハンドラーをイベントにバインドします。focus

「内部」Function.bindは、特定のコンテキストにバインドされた関数を作成しています (this関数が呼び出されたときにそのコンテキストと等しくなります)。これにはフレームワークは必要ありません (ただし、最新のブラウザーが必要です)。

したがって、この場合、 への呼び出しは、フォーカスFunction.bindされるたびに、メソッドのコンテキストが現在の値(おそらく使用しているウィジェット/コンポーネント) に設定されるようにします。これは通常、イベントが発生した要素であるため、必要です。inputonInputFocusthis

MDN の記事にFunction.bindは、これについての適切な説明があります。

これがどのように機能するかをよりよく説明するために、簡単な例を取り上げます。

HTML:

​&lt;button id="test" type="button">Test</button>
<button id="test2" type="button">Test 2</button>
<div id="target"></div>

JavaScript :

var fill = function() {
    $(this).css('background-color', 'yellow');
};
/* button#test will be colored yellow */
$("#test").bind("click", fill);

/* div#target will be colored yellow */
$("#test2").bind("click", fill.bind($("#target")));

最初のイベント バインディングでは、fillが呼び出されthisて設定され#testます (クリックされた要素であるため)。

2 番目でfillは、再度呼び出されますが、イベント バインディングの内部への呼び出しのために にthis設定されます。#targetFunction.bind

例: http://jsfiddle.net/GK7L8/

于 2012-08-13T00:08:49.127 に答える