Jqueryの$(selector).each()と$.each()の違いを詳しく解説-jsチュートリアル-php.cn

Jqueryの$(selector).each()と$.each()の違いを詳しく解説

伊谢尔伦

リリース： 2017-06-16 16:20:45

オリジナル

1272 人が閲覧しました

私たちは皆、Jqurey の each 関数を使用したことがあり、each() を呼び出すには 2 つの方法があることを知っています。1 つは $.each() を介して呼び出すことで、もう 1 つは $(selector).each() を介して呼び出すことです。）では、それらの違いは何ですか？

Jquery のソースコードを見ると、$.each() がコア実装であり、$(selector).each() が呼び出される $.each() であることがわかります。まず $ のソースコードを分析しましょう。 .each() (下部):

each (obj, callback, args) 関数は 3 つのパラメーターを受け取ります: obj - 走査されるオブジェクトまたは配列、callback - 走査および実行されるコールバック関数、args - 自分で指定した配列 (最初は無視してください)。

jQueryの各メソッドの実装はcallメソッドを使用しています。まず、次の例では、それぞれの配列の効果は同じです。

通話を通じてこの方向を変更できます。

var testCall = function(obj, callback){
    callback.call(obj, 1);
}

ログイン後にコピー

testCall(["1. this のポインティングを変更します", "2. この関数を内部的に呼び出すことができます"], function(index){ //call メソッドを使用すると、次の最初のパラメータに直接アクセスできますthis を介した呼び出し渡されるオブジェクト。
alert(this[index]) //2. 関数は、call メソッドを使用して呼び出すことはできず、this は使用されません。

var test = function(obj, callback){
    callback(obj, 1);
}

ログイン後にコピー

test(["1. this のポインティングを変更します", "2. 関数内で this を通じて関数を呼び出すことができます"], function(index){ //call メソッドを使用しないでください。これも使用しません。

alert(this[index ]); //未定義});

jQuery.each は call によって変更された this ポイントである必要があります;

$.each([1,2,3], function (index, item) {    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

ログイン後にコピー

jQuery のソースコードを見ていないので、callback.call を使用しましたそれをコピーするには、同じ方法で実装する必要があります。

var each = function(arr, callback){
  for( var index = 0 ; index < arr.length ; index++ ){
    callback.call(arr[index], index, arr[index]);
  }
}
each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

ログイン後にコピー

注: これは、call が使用されていない場合、コールバック関数では使用できません。

1. args がない場合

一般的に、args は一般的に使用されないため、if (args) が確立されている場合、つまりコード内の灰色の部分を直接見る状況については説明しません。 each() 関数のコア部分

if(isArray) {
  　　　　for(; i < length; i++) {
  　　　　　　value = callback.call(obj[i], i, obj[i]);
  　　　　　　if(value === false) { break; }
  　　　　}
 　　 }

ログイン後にコピー

走査したいオブジェクトが配列型の場合、このコードブロックを入力します

forループ

配列の各要素を走査し、callメソッドを使用して実行しますobj[i].callback( i, obj[i]), したがって、コールバック関数を自分で記述するときは、jquery が配列内の各オブジェクトを使用してコールバック関数を実行することを認識する必要があります。渡されるパラメーターはインデックスです。同時に、コールバックメソッド内の this は要素を指します。次の行は、コールバック関数が値を返すかどうかを決定します。コールバック関数が false を返した場合は、ジャンプします。配列のループの。渡したオブジェクトもトラバースできる場合、コードは上記の配列トラバーサルと同じです

else {
  　　　　for(i in obj) {
   　　   　　value = callback.call(obj[i], i, obj[i]);
   　　   　　if(value === false) { break; }
   　　   }
　　  }

ログイン後にコピー

オブジェクトを渡したら、for(x in y)

を使ってオブジェクトのプロパティをトラバースします

原則は上記と同じですが、属性に変更するだけです。

2. args の場合
3 番目のパラメータを指定して each() を呼び出す場合、次のコードブロックを入力して分析します:

if(isArray) {            
   for(; i < length; i++) {
     value = callback.apply(obj[i], args);                
     if(value === false) { break; }
            }
        } else {            
        for(i in obj) {
          value = callback.apply(obj[i], args);                
          if(value === false) { break; 
          }
        }
  }

ログイン後にコピー

同様に、最初に何をトラバースするかを決定します。オブジェクトが配列であり、配列の場合は、配列要素 obj[i] を走査し、obj[i].callback(args) を実行します

注意!ここで渡されるパラメータは、自分で渡した args 配列です。これは、args パラメータを持たない場合とは異なります。つまり、各関数を呼び出して独自の配列パラメータを渡す場合、コールバック関数のパラメータリストは次のようになります。渡した args 配列。他のすべてについても上記と同じです。

$(selector).each(callback,args) 関数は 2 つのパラメーターを受け取ります: callback - トラバースして実行されるコールバック関数、args - 自分で指定した配列。 $.each() 関数を理解した後、$(selector).each は簡単です。ソースコードを開くと、$(selector).each 内で $.each() 関数が呼び出されていることがわかります。

each: function( callback, args ) {
  　　  return jQuery.each( this, callback, args );
　　},

ログイン後にコピー

ご覧のとおり、$.each() を呼び出すと、obj パラメーターは $(selector) として記述されます。これは、jquery内部オブジェクトを返す jquery セレクターです。

概要: $.each() と $(selector).each() の違いは、前者はすべてのオブジェクトまたは配列を走査できるのに対し、後者は jquery セレクターによって返される jquery 内部オブジェクトを走査できることです。もっと強くなってください

以上がJqueryの$(selector).each()と$.each()の違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。