Explication détaillée de la différence entre $(selector).each() et $.each() de Jquery

Nous avons tous utilisé la fonction each dans Jqurey, et nous savons tous qu'il existe deux façons d'appeler each(), l'une consiste à appeler via $.each(), l'autre consiste à appeler via $(selector). each() , alors quelle est la différence entre eux ?

Si vous regardez le code source de Jquery, vous saurez que $.each() est l'implémentation principale, $(selector).each() est le $.each() appelé, analysons d'abord $ Code source de .each() (en bas) :

La fonction each (obj, callback, args) reçoit 3 paramètres : obj - l'objet ou le tableau à parcourir, callback - la fonction de rappel à parcourir et à exécuter , args - le tableau spécifié par vous-même (ignorez-le d'abord).

L'implémentation de chaque méthode dans jQuery utilise la méthode call. La méthode call peut définir le contexte. Premièrement, dans l'exemple suivant, l'effet de chaque tableau est le même. Pourquoi ne pas l'appeler directement ?

Vous pouvez changer la direction de ceci par appel.

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

testCall(["1. Changer le pointeur de ceci", "2. La fonction peut être appelée en interne via ceci"], function(index){ //En utilisant la méthode d'appel, elle peut accessible directement via this L'objet transmis comme premier paramètre de l'appel
alert(this[index]); //2 La fonction peut être appelée via this });

N'utilisez pas la méthode d'appel. Elle n'est pas utilisée.

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

test(["1. Changer le pointeur de ceci", "2. La fonction peut être appelée via ceci à l'intérieur de la fonction"], function(index){ //Ne pas utiliser la méthode d'appel , n'utilisez pas this.
alert(this[index]); //undefined});

jQuery.each devrait être le point this modifié par appel

$.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}
*/

Je n'ai pas regardé le code source de jQuery, utilisez callback.call pour le copier, la méthode d'implémentation devrait être la même.

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}
*/

Remarque : ceci, si l'appel n'est pas utilisé, cela ne peut pas être utilisé dans la fonction de rappel.

1. Le cas sans arguments

De manière générale, les arguments ne sont pas couramment utilisés, nous ne discuterons donc pas de la situation où if (args) est vrai, c'est-à-dire le voir directement marqué dans gris dans la partie code, c'est aussi la partie centrale de la fonction each()

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

Si l'objet que vous souhaitez parcourir est de type tableau, entrez ce bloc de code
　pour la boucle Parcourez chaque élément du tableau , puis utilisez la méthode d'appel pour exécuter obj[i].callback(i,obj[i]),
Par conséquent, lorsque vous écrivez la fonction de rappel vous-même, vous devez savoir que jquery utilisera chaque objet du tableau pour exécuter votre fonction de rappel. Les paramètres passés sont l'index de l'élément dans le tableau et l'élément en même temps, cela pointe également vers. l'élément ;
La ligne suivante consiste à déterminer si la fonction de rappel a renvoyé une valeur, si la fonction de rappel renvoie false, sortez de la boucle du tableau.

Si l'objet que vous passez peut également être traversé, le code est le même que le parcours de tableau ci-dessus

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

Si vous passez un objet, utilisez for(x in y)Parcourir les attributs de l'objet ,
Le principe est le même que ci-dessus, sauf qu'il est remplacé par l'attribut x à l'intérieur de l'objet pour exécuter la fonction de rappel, ce qui équivaut à obj.attr.callback( i,obj.attr);
Si false est renvoyé dans la fonction de rappel, l'opération de boucle se terminera également.

2. Lorsqu'il y a des arguments

Lors de l'appel de each() avec le troisième paramètre, le bloc de code suivant sera saisi pour analyse :

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; 
          }
        }
  }

De la même manière, il déterminera d'abord si l'objet que vous souhaitez parcourir est un tableau. S'il s'agit d'un tableau, il traversera l'élément obj[i] du tableau et exécutera obj[i].callback( args)
Attention ! Le paramètre passé ici est le tableau args que vous avez transmis. Ceci est différent du paramètre args sans. C'est-à-dire que si vous appelez la fonction each et transmettez votre propre paramètre de tableau, les paramètres de rappel de la fonction<.>La liste est le tableau args que vous transmettez. Comme ci-dessus pour tout le reste.

La fonction $(selector).each(callback,args) reçoit 2 paramètres : callback--la fonction de rappel à parcourir et à exécuter, args--le tableau spécifié par vous-même. Après avoir compris la fonction $.each(), $(selector).each est simple. Ouvrez le code source et constatez que la fonction $.each() est appelée dans $(selector).each. Le code source est le suivant :

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

Vous pouvez voir que lors de l'appel de $.each(), le paramètre obj est écrit comme ceci, qui est $(selector) Il s'agit du sélecteur jquery renvoyant un jquery

objet interne<.>. 　Résumé : La différence entre $.each() et $(selector).each() est que le premier peut parcourir tous les objets ou tableaux, tandis que le second est renvoyé pour les sélecteurs jquery les objets internes jquery sont parcourus, le premier est plus puissant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!