web-dev-qa-db-ja.com

'$（this）'と 'this'の違いは何ですか？

私は現在このチュートリアルを通して作業しています： jQueryを始めよう

以下の2つの例では、

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

最初の例では、各li要素の内側にテキストを追加するために$(this)を使用しています。 2番目の例では、フォームをリセットするときにthisを直接使用します。

$(this)はthisよりもずっと頻繁に使われているようです。

最初の例は$()がappend()関数を理解するjQueryオブジェクトに各li要素を変換しているのに対し、2番目の例ではreset()をフォーム上で直接呼び出すことができます。

基本的に、特別なjQuery専用関数には$()が必要です。

これは正しいです？

javascriptjquerythis
547
Kevin Wu

はい、あなたはjQueryを使っているときだけ$()が必要です。 jQueryの助けを借りてDOMのことをしたいのなら、これを覚えておいてください。

$(this)[0] === this

基本的に、一連の要素を取得するたびに、jQueryは jQueryオブジェクト に変換します。結果が1つしかないことがわかっている場合は、それが最初の要素に入ります。

$("#myDiv")[0] === document.getElementById("myDiv");

等々...

498
Spencer Ruport

$()はjQueryコンストラクター関数です。

thisは呼び出しのDOM要素への参照です。

したがって、基本的には、$(this)では、$()内のthisをパラメータとして渡すだけで、jQueryのメソッドと関数を呼び出すことができます。

361
Reigel

はい、jQuery関数には$(this)が必要ですが、jQueryを使用しない要素の基本的なjavascriptメソッドにアクセスしたい場合は、単にthisを使用できます。

90
Alex King

jQueryを使うときは、通常$(this)を使うことをお勧めします。しかし、その違いを知っていれば（知っておくべきですが）、thisを使うほうが便利で速いことがあります。例えば：

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

より簡単で純粋です

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});
71
Fredrick Gauss

thisは要素、$(this)はその要素で構築されたjQueryオブジェクトです

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

より深い外観

thisMDNは実行コンテキストに含まれています

スコープは現在のExecution ContextECMA。 thisを理解するには、実行コンテキストがJavaScriptでどのように動作するかを理解することが重要です。

実行コンテキストはこれをバインドします

制御が実行コンテキストに入ると（そのスコープでコードが実行されます）、変数の環境が設定されます（字句および変数環境-基本的に、これはすでにアクセス可能な変数を入力するための領域と、ローカル変数のための領域を設定します保存されている）、およびthisのバインディングが発生します。

jQueryはこれをバインドします

実行コンテキストは論理スタックを形成します。その結果、スタック内のより深いコンテキストは以前の変数にアクセスできますが、それらのバインディングは変更されている可能性があります。 jQueryがコールバック関数を呼び出すたびに、thisバインディングを変更しますapplyMDN。

callback.apply( obj[ i ] )//where obj[i] is the current element

applyを呼び出した結果、jQueryコールバック関数の内部で、thisは現在の要素を参照しますコールバック関数によって使用されます。

たとえば、.eachでは、一般的に使用されるコールバック関数は.each(function(index,element){/*scope*/})を許可します。そのスコープでは、this == elementはtrueです。

jQueryコールバックは、適用関数を使用して、呼び出される関数を現在の要素にバインドします。この要素は、jQueryオブジェクトの要素配列から取得されます。構築された各jQueryオブジェクトには、selectorjQuery API jQueryオブジェクトのインスタンス化に使用されました。

$(selector)はjQuery関数を呼び出します（$はjQueryへの参照であり、コードはwindow.jQuery = window.$ = jQuery;です）。内部的に、jQuery関数は関数オブジェクトをインスタンス化します。したがって、すぐには明らかではないかもしれませんが、$()を使用すると、内部でnew jQuery()が使用されます。このjQueryオブジェクトの構築の一部は、セレクターのすべての一致を見つけることです。コンストラクターは、htmlストリングおよびelementsも受け入れます。 thisをjQueryコンストラクターに渡す場合、構築するjQueryオブジェクトの現在の要素を渡す。 jQueryオブジェクトには、セレクター（またはthisの場合は単一の要素）に一致するDOM要素の配列のような構造が含まれます。

JQueryオブジェクトが構築されると、jQuery APIが公開されます。 jQuery api関数が呼び出されると、この配列のような構造を内部的に繰り返します。配列内の各アイテムに対して、APIのコールバック関数を呼び出し、コールバックのthisを現在の要素にバインドします。この呼び出しは、上記のコードスニペットで見ることができます。objは配列のような構造で、iは現在の要素の配列内の位置に使用される反復子です。

45
Travis J

そう、$(this)を使うことで、あなたはオブジェクトのjQuery機能を有効にしました。 thisを使用するだけでは、汎用のJavascript機能しかありません。

39
Ray Lu