2011-10-04 4 views
6

처음에는 jQuery 객체를 반환하기 전에 obj [0], obj [1], obj [2] 등을 할당하는 것이고, 길이는 이 수동으로으로 지정되었다고 생각했습니다. 그러나 아니요. console.log는 객체가 아닌 배열을 기록합니다.jQuery는 Array-Objects를 어떻게 생성합니까?

jQuery 소스를 빠르게 살펴 봤지만 익숙하지 않아 쉽게 깨지 못했습니다. jQuery.makeArray이 먼저 터지지 만 내가 찾고있는 것과는 반대 인 것으로 밝혀졌습니다. 실제로 그것을 사용하여 객체 메소드를 잃게됩니다.

첫 번째로 배열을 시작한 다음 개체의 모든 속성과 메서드를 개체로 복사합니다.

jQuery 소스 코드 경험을 가진 사람이라면 누구에게도 명확한 답변이 있습니까?

+0

이것은'NodeList'가 배열처럼 작동하는 방식과 유사하지만 그렇지 않습니다. – BoltClock

+0

어떤 Array-Objects입니까? 객체가 아닌 배열을 기록한다는 것을 어떻게 알 수 있습니까? –

답변

5

새로운 기능을 만들고 새 배열을 프로토 타입으로 지정하는 것만 큼 간단합니다. 그래서 예를 들면

function ArrayLike() {} 
ArrayLike.prototype = []; 

:

function ArrayLike() {} 
ArrayLike.prototype = []; 
ArrayLike.prototype.fromArray = function(arr) { 
    for(var i = 0; i < arr.length; i++) 
     this.push(arr[i]); 
}; 
ArrayLike.prototype.foo = function() { 
    console.log("foo", this); 
}; 

var a = new ArrayLike(); 
a.fromArray([1, 2]); 
console.log(a); 
a.foo(); 

http://jsfiddle.net/Xeon06/fUgaf/

+0

이것은 현저하게 매끄 럽다. 나는이 미니멀리스트 버전에 대해 질문 할 것이다. 감사. – Manngo

13

jQuery는 (ES 표준에서) 배열과 유사한 객체를 만듭니다. 특히 길이 속성이 있으며 길이 속성을 사용하면 정수 기반 인덱스 아래에 관련 항목이 있습니다.

:

var arrayLike = {length: 3, 0:'first', 1:'second', 2:'third'}; 
Array.prototype.join.call(arrayLike, '|'); // "first|second|third" 

당신이 the standard (15.4.4)를 보는 경우에, 특히 Array.prototype 방법은 당신이 각각의 모든 하나에 다음과 같은 메모를 볼 수 있습니다 :로

그것은 간단합니다

주 * 기능은 의도적으로 일반입니다. 이이 값을 Array 객체로 요구하지 않습니다. 따라서 메서드로 사용할 다른 종류의 개체로 으로 전송할 수 있습니다. * 함수가 을 호스트 객체에 성공적으로 적용 할 수 있는지 여부는 구현에 따라 다릅니다. 당신이이 알고리즘의 설명을 보면

, 그들은 거의 단지 (우리의 경우 배열과 같은 객체) 객체를 반복하는 길이 속성을 사용하여 그 정수 기반의 뒤에 값에 액세스 열쇠. 이러한 이유로 그들은 일반적이며 관련 속성을 가진 일반 js 객체에서 작업합니다.

본질적으로 그게 전부 다. jQuery는 (빌딩이 jizzle, jquery의 css 선택기 엔진에서 올바르게 실행되었다고 기억한다면). 이것을 테스트하거나 다양한 방법으로 증명할 수 있습니다. 예를 들어, 표준 JS 배열 길이 속성이 단축 마법을 수행하지만, jQuery 오브젝트는하지 않습니다

var arr = [1,2,3], $arr = $('div'); // assuming three divs 
arr.length=2; arr[2]; // undefined 
$arr.length=2; $arr[2]; // still references the div 

http://jsfiddle.net/cnkB9/

그래서 jQuery의 makeArray가 JQuery와 배열과 같은 객체를 변환하고, 차종 그것을 실제 네이티브 js 배열로 변환합니다.하지만 말했듯이, 모든 jquery 메소드가 첨부되지는 않습니다. What makes Firebug/Chrome console treat a custom object as an array?하여 length 재산의 존재와 splice 함수가 가장 콘솔에 배열처럼 표시 할 수 있다고 설명 :

는 콘솔에 표시하는 이유에 관해서는, 나는이 훌륭한 대답을 참조하십시오. 앞서 언급했듯이 FF4의 웹 콘솔에서는 그렇지 않습니다. 단지 네이티브 js 배열이 아니라는 것을 보여줍니다. 흥미롭게도 splice 함수는 실제로는 작동하지 않고, 그냥 존재해야하며 함수 여야합니다.예 :

>> console.log({length:2,0:'some',1:'thing',splice:new Function}); 
["some", "thing"] 
5

기본 자바 스크립트 배열 조작으로 jQuery를 선택에 의해 반환 된 배열 변환하는 방법은 다음과 같은 간단한 코드 :

var $arr = $('option'); // assuming three options 
var arr = Array.apply(null, $arr); 
// arr contains [option, option] 

위의 코드에 대해 다음 HTML을 고려하십시오.

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.5.2.min.js"></script> 
    </head> 
    <body> 
     <select id="addSelection"> 
      <option value="Original Value">Original Value</option> 
      <option value="Two Value">Value two</option> 
      <option value="Three Value">Value three</option> 
     </select> 

     <br /> 

     <input id="btn" type="button" value="Changes" /> 
    </body> 
</hmtl> 
관련 문제