Jquery의 $(selector).each()와 $.each()의 차이점에 대한 자세한 설명

우리는 모두 Jqurey에서 Each 함수를 사용해 보았고, Each()를 호출하는 두 가지 방법이 있다는 것을 모두 알고 있습니다. 하나는 $.each()를 통해 호출하는 것이고, 다른 하나는 $(selector).each(를 통해 호출하는 것입니다. ), 그러면 둘 사이의 차이점은 무엇입니까?

Jquery 소스 코드를 보면 $.each()가 핵심 구현이고 $(selector).each()가 $.each()가 호출되는 것을 알 수 있습니다. 먼저 $의 소스 코드를 분석해 보겠습니다. .each() (하단):

Each(obj, callback, args) 함수는 3개의 매개변수를 받습니다: obj - 탐색할 객체 또는 배열, callback - 탐색하고 실행할 콜백 함수 , args - 사용자가 지정한 배열(먼저 무시하세요).

jQuery에서 각 메소드의 구현은 호출 메소드를 사용합니다. 먼저 다음 예에서 배열의 효과는 동일합니다.

전화를 통해 방향을 변경할 수 있습니다.

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

testCall(["1. this의 포인팅을 변경합니다.", "2. this를 통해 내부적으로 함수를 호출할 수 있습니다."], function(index){ //call 메소드를 사용하면 의 첫 번째 매개변수에 직접 접근할 수 있습니다. this를 통해 호출된 객체입니다.
alert(this[index]); //2.this를 통해 함수를 호출할 수 있습니다. })

는 call 메소드를 사용하지 않으며 this를 사용하지 않습니다.

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

test(["1. this의 포인팅을 변경합니다.", "2. 함수 내부에서 this를 통해 함수를 호출할 수 있습니다."], function(index){ //호출 메서드를 사용하지 마세요. this를 사용하지 마세요.
alert(this[index ]); //undefine});

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)가 설정된 경우의 상황, 즉 코드에서 회색 부분을 직접 살펴보겠습니다. 각각() 함수의 핵심 부분

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

순회하려는 객체가 배열 유형인 경우 다음 코드 블록을 입력하세요
　　for loop배열의 각 요소를 순회한 다음 호출 메소드를 사용하여 실행합니다. obj[i].callback( i, obj[i]),
따라서 콜백 함수를 직접 작성할 때 jquery는 배열의 각 개체를 사용하여 콜백 함수를 실행한다는 점을 인식해야 합니다. 동시에 콜백 메서드 내부의 이 요소도 요소를 가리킵니다.
다음 줄은 콜백 함수가 값을 반환하는지 확인하는 것입니다. 배열의 루프.

전달한 객체도 순회할 수 있는 경우 코드는 위의 배열 순회와 동일합니다

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

객체를 전달하는 경우 for(x in y)를 사용하여 객체의 속성을 순회합니다,
　The 원칙은 위와 동일합니다. 속성으로 변경하면 됩니다.

2. args의 경우

세 번째 매개변수로 각각()을 호출할 때 다음 코드 블록을 입력하여 분석합니다.

　

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 매개변수가 없는 것과 다릅니다. 즉, Each 함수를 호출하고 자체 배열 매개변수를 전달하는 경우 콜백
함수의 매개변수 목록은 다음과 같습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!