jquery - jqueryのスコープ内の親「$(this)」

Question

$.fn.sample = function()呼び出し元があります。たとえば$('#example').sample();、関数内で「this」をスコープに使用できます。

$.fn.sample = function(){
   console.log($(this).width()); 
} //In this case, it would log the width of #example

しかし、次のように、ホバー関数を別の要素に呼び出すとしましょう

$.fn.sample = function(){ 
  console.log($(this).width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
  });
}

したがって、ホバー関数内で「$(this)」は #other を参照します。「親」の $(this) を使用する方法はありますか? この場合、このホバー関数内の「#example」は?

score 3 · Accepted Answer

答えはイエスですが、親とは違います。

あなたの質問に対する一般的な解決策は、「その」変数を使用することです。

$.fn.sample = function(){ 
  console.log($(this).width());

  var that = $(this);             // <-- good pattern for traversing scope.
       
  $('#other').hover(function(){
    
    //Here, that will refer to the parent.
  });

}

これはもともとDouglas Crockford によって提案されたものだと思いますが、その起源については確信が持てません。リンクは技術的な詳細を提供しますが、使用法は「プライベートデータメンバー」にとって非常に重要であることが判明しました.

ベストプラクティスに関するもう 1 つの非常に重要なポイント...

パターンを使用することを強くお勧めしますが、変数「that」を呼び出さないでください。

理由は次のとおりです。

知ることはそれほど重要ではありません->変数がどこから来たのか->それが何であるか. 実際には、問題の現在の行から何行も離れたコードのラッピングスコープから来る可能性があります。保守性の観点からすると、「それ」が何であるかを理解しようとするのは時間の無駄であり、「これ」が何であるかさえわからない場合はさらにイライラします。代わりに、それをそのまま呼び出し、スコープをそのままにする必要があります。

例えば、

var button_container; //instead of that.

また、ドル記号を追加する命名規則を使用している人もいます。

var $name;

これは問題ありませんが、混乱する可能性があります。オブジェクトが jQuery オブジェクトであることを示していることに注意してください。

それが役立つことを願っています。

score 3 · Accepted Answer

You would want to write the original reference to thisas a closure to the inner function like this:

$.fn.sample = function(){ 
  var $parent = $(this);
  console.log($parent.width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
    $parent.....
  });
}

score 2 · Accepted Answer

名前付き変数を使用する以前の解決策は、特定の質問に対する修正です。だから、それらの1つに行きます。ClintNash の回答は特に洞察に満ちていました。

ただし、これは、ほとんどの人が JavaScript のスコープと、クロージャーとは/何をするかを理解していないという事実につながります。

JavaScript クロージャ、スコープなどの詳細については、このブログ投稿 (私のものではありません) を参照してください: http://jibbering.com/faq/notes/closures/

score 2 · Accepted Answer

最も簡単な方法は、参照を保存することです:

$.fn.sample = function(){ 
  console.log($(this).width());
  var $that = $(this)
  $('#other').hover(function(){
    // Here, $(this) will refer to #other
    // but $that will still be the same as above!
  });
}

score 2 · Accepted Answer

Cache this to $this:

$.fn.sample = function(){
  var $this = $(this);
  console.log($this.width()); 
  $('#other').hover(function(){
    // Here, $(this) will refer to #other
    // and $this will refer to the selector that called sample()
  });
}

score 1 · Accepted Answer

何らかの方法で保存する必要がありますEG

$.fn.sample = function(){ 
  $parent = $(this);
  console.log($(this).width()); 
  $('#other').hover(function(){
    //Here, $(this) will refer to #other
    // use $parent in here. 
  });
}

score 0 · Accepted Answer

$.fn.sample = function() {
  var $n = $(this);
  console.log($n.width()); 
  $('#other').hover(function(){
    // use $n
  });
}

score 0 · Accepted Answer

ここで指定されている他のオプションのいずれかを使用しますが、代わりに、関数のapplyメソッドを使用して、これを必要に応じて設定することもできます。

jquery - jqueryのスコープ内の親「$(this)」

8 に答える 8

Related

Reference