プロトタイプこのセレクタ私は次の関数使用している場合は

Question

：

clusters.prototype.shop_iqns_selected_class = function() { 
    if(this.viewport_width < 980) { 
     $(this.iqns_class).each(function() { 
      $(this.iqn).on('click', function() { 
       if($(this).hasClass('selected')) { 
        $(this).removeClass('selected'); 
       } else { 
        $(this).addClass('selected'); 
       } 
      }); 
     }); 
    } 
} 

は、クラスタ機能にプロパティを追加するには、私は、私はthis.viewport_widthが定義されている親関数を参照していますthis.viewport_widthを使用していることを知っていますしかし、私がjQueryセレクタ$(this)を使用しているとき、私は$.on()関数の親を参照していますか？

Answer 1

JavaScriptでは、thisは、完全にによって定義され、どのように機能がと呼ばれていますか。 jQueryのeach関数は、与えられた反復子関数を各要素の値にthisを設定する方法で呼び出します。したがって、その反復子関数内では、thisはそのコードの残りの部分で参照したものを参照しなくなります。

これは簡単にクロージャのコンテキスト内の変数を用いて固定されています

あり

clusters.prototype.shop_iqns_selected_class = function() { 
    var self = this; // <=== The variable 
    if(this.viewport_width < 980) { 
     $(this.iqns_class).each(function() { 
      // Do this *once*, you don't want to call $() repeatedly 
      var $elm = $(this); 

      // v---- using `self` to refer to the instance 
      $(self.iqn).on('click', function() { 
       // v---- using $elm 
       if($elm.hasClass('selected')) { 
        $elm.removeClass('selected'); 
       } else { 
        $elm.addClass('selected'); 
       } 
      }); 
     }); 
    } 
} 

私は各DOM要素を参照するためにthisを使用し続けてきましたが、ありますので、あなたはイテレータ関数に引数を受け入れることができますあいまいん：

clusters.prototype.shop_iqns_selected_class = function() { 
    var self = this; // <=== The variable 
    if(this.viewport_width < 980) { 
     // Accepting the args -----------v -----v 
     $(this.iqns_class).each(function(index, elm) { 
      // Do this *once*, you don't want to call $() repeatedly 
      var $elm = $(elm); 

      // v---- using `self` to refer to the instance 
      $(self.iqn).on('click', function() { 
       // v---- using $elm 
       if($elm.hasClass('selected')) { 
        $elm.removeClass('selected'); 
       } else { 
        $elm.addClass('selected'); 
       } 
      }); 
     }); 
    } 
} 

もっと読み（私のブログで記事についてのthis JavaScriptで）：

`cluster`機能をインスタンス化するとき0

• Mythical methods
• You must remember this

Answer 2

コード全体でthisを使用しないでください。 $.eachような方法は、あなたに別の参照を与える：

$(".foo").each(function(index, element){ 
    /* 'element' is better to use than 'this' 
    from here on out. Don't overwrite it. */ 
}); 

また、$.onは、イベントオブジェクトを経由して同じことを提供します。あなたのネストが深い実行すると

$(".foo").on("click", function(event) { 
    /* 'event.target' is better to use than 
    'this' from here on out. */ 
}); 

、thisを使用するにはあまりにも多くのあいまいさがあります。もちろん、あなたが積極的に活用して見つけることができます別の方法は、直接、コールバックの内側に、thisに等しい、thatのエイリアスを作成することです：

$(".foo").on("click", function(){ 
    var that = this; 
    /* You can now refer to `that` as you nest, 
    but be sure not to write over that var. */ 
}); 

私は、引数にはjQueryが提供する値を使用して、または好みますイベントオブジェクト