javascript 의사 배열 구현 방법_javascript 기술

이 글은 javascript universal loop traversal method forEach에서 언급된 의사 배열에 관한 마지막 질문에 대한 답변입니다.
의사 배열이란 무엇인가요?
Array.prototype.slice를 통해 실제 배열로 변환할 수 있는 길이 속성을 가진 객체입니다.
이러한 개체가 많이 있으며, 더 특별한 개체는 인수 개체와 getElementsByTagName, document.childNodes 등과 같은 호출입니다. 이들은 모두 의사 배열인 NodeList 개체를 반환합니다.
Array.prototype.slice.call(fakeArray)을 통해 의사 배열을 실제 Array 객체로 변환할 수 있습니다.
예제를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var fakeArray01 = { 0:'a',1:'b',length:2};//표준 의사 배열 객체입니다
var arr01 = Array.prototype.slice.call(fakeArray01)
alert( arr01[0]);//a
var arr02 = [].slice.call(fakeArray01);
alert(arr02[0]);//a

slice OK 배열 조각을 얻는 데 사용되며 새 배열을 반환하고 원래 배열을 수정하지 않습니다.
예제에서는 fakeArray가 Array 객체로 성공적으로 변환된 것을 볼 수 있습니다. 어쩌면 다들 Array.prototype.slice.call의 작성 방법이 낯설 수도 있는데, 사실 [].slice.call을 통해서도 같은 효과를 얻을 수 있는데 왜 프로토타입을 통해서 구현해야 할까요? 프로그램을 더 효율적으로 실행하고 코드도 더 아름답습니다.
의사 배열 구현
의사 배열의 구현에 대해 좀 더 자세히 살펴보겠습니다.
몇 가지 특별한 사용 사례를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var fakeArray01 = {a:'a',b:'b',length:2};//길이 첨자에 해당하는 값이 없습니다
var arr01 = Array.prototype.slice.call (fakeArray01);
alert(arr01[0]);//정의되지 않음
var fakeArray02 = {0:'a',1:'b',length:'num'};//길이는 a가 아닙니다. 숫자 값
var arr02 = Array.prototype.slice.call(fakeArray02);
alert(arr02[1]);//undefine

마찬가지로 fakeArray01과 fakeArray02도 실수로 변환됩니다. 배열이지만 값은 모두 정의되지 않았습니다
V8 엔진 array.js의 소스 코드를 보면 내부 구현을 단순화할 수 있습니다. 슬라이스 대상:

코드 복사 코드는 다음과 같습니다.

function Slice(start, end) {
var len = ToUint32(this.length ), result = []
for(var i = start; i < end; i ) {
result.push(this[i] );
}
return result;
}

Slice는 이것이 배열 유형일 필요가 없으며 길이 속성만 있으면 됨을 알 수 있습니다. 그리고 길이 속성이 숫자 유형일 필요는 없습니다. 숫자 값으로 변환할 수 없는 경우 ToUnit32(this.length)는 0을 반환합니다.
위 결론에 따르면 fakeArray01은 숫자 값으로 변환된다는 결론을 내릴 수 있습니다. lenth가 2인 배열이고 해당 값은 모두 정의되지 않은 상태로 초기화되고, fakeArray02는 길이가 0인 배열로 변환됩니다. 아래 첨자 1이 있는 요소에 자연스럽게 액세스하면 정의되지 않은
IE 문제
가 반환됩니다. 표준 브라우저 슬라이스 구현에서는 이미 모든 문제를 설명할 수 있지만 IE에서는 NodeList를 처리하는 동안 문제가 발생했습니다. IE에서는 NodeList를 실제 배열로 변환할 수 없으며 오류가 발생합니다. 왜 이런가요? 엄밀히 말하면 추상 클래스 Arraioid는 IE 내부에 정의되어 있으며 Array와 Arguments는 모두 이 클래스를 상속하므로 슬라이스를 사용할 수 있습니다. 그러나 DOM 개체가 COM을 통해 JScript에 연결되어 슬라이스 감지가 실패합니다.
Jquery 및 의사 배열
Jquery는 의사 배열을 내부적으로 광범위하게 사용합니다. 전체 Jquery 객체는 의사 배열을 기반으로 구축되었다고 할 수 있으므로 Jquery의 실제 응용 프로그램을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

;



< ;script src="jquery-1.4.2.js" type="text/javascript">
<script> <br>$(document).ready(함수( ){ <br>var body = $("body"); <br>alert(body.get(0).tagName) <br>}) <br></script> 헤드>
<본문>

이보다 더 간단한 프로그램은 없습니다. 내부 구현 원리를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다:

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
var match, elem, ret, doc
/ / $(""), $(null) 또는 $(undefine) 처리
if ( !selector ) {
return this
}
// $(DOMElement) 처리
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
// body 요소만 존재합니다. 일단 찾기를 최적화하세요
if ( selector === "body" && !context ) {
this.context = document
this[0] = document.body.selector = "body";
this.length = 1;
return this
}
//...
},
get: function( num ) {
return num == null ?
// '깨끗한' 배열 반환
this.toArray() :
// 객체만 반환
( num < 0 ? this.slice( num) [ 0 ] : this[ num ] );
}
}

마지막으로 프로그램의 실행 내용을 설명하자면, 그 전에 Jquery에 대해 이야기해야 합니다. 안에 뭔가가 있습니다.
Jquery를 사용해 본 사용자라면 Jquery의 선택자 대표인 $() 함수를 모두 알고 있을 것입니다. $() 함수를 사용하여 페이지의 요소를 선택할 수 있습니다(특정 구문은 Jquery 도움말 문서에서 매개변수화할 수 있습니다). 실제로 $() 함수를 실행할 때 프로그램은 위에 나열된 init 메소드를 실행합니다. $(document)가 호출될 때 발생하는 이벤트를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

//$(document)
init: function( selector, context) {
var match, elem, ret, doc;// $(DOMElement) 처리: DOM 요소 처리,
if ( selector.nodeType ) {
this.context = this[0] = selector; 속성 0 값에 선택기를 할당합니다. 이번에는 문서 객체입니다.
this.length = 1; //의사 배열을 만들고 아래 첨자를 업데이트합니다.
return this; //Jquery 객체를 반환합니다.
}
//... ..
}


$("body") 는 동일하므로 더 이상 말하지 않겠습니다.

Jquery의 모든 작업은 Jquery 객체를 반환한다는 것을 알고 있습니다. 그러면 해당 DOM 객체를 어떻게 얻나요? Jquery는 특별히 jquery 객체에서 DOM 객체를 얻는 데 사용되는 get 메서드를 제공합니다. body.get(0)인데 Jquery의 모든 작업이 배열에서 수행되기 때문에 get() 대신 get(0)인 이유는 무엇입니까? 따라서 get 메소드에서 특정 요소를 가져오려면 아래 첨자 값을 전달해야 합니다. 이제 get 메소드의 구체적인 구현을 살펴볼 차례입니다.

코드 복사 코드는 다음과 같습니다.

get: function( num ) {

return num == null ?
//num이 없으면 DOM 배열을 직접 반환
this.toArray():
/ /지정된 num이 지정되면 지정된 요소를 반환합니다.
//this.slice는 jquery의 또 다른 메서드입니다. 실제로 내부적으로 Array.prototype.slice를 호출하여 의사 배열을 실제 배열로 변환합니다.
( num < 0 ? this.slice (num)[ 0 ] : this[ num ] );
}


이제 거의 다 된 것 같습니다.

참고: 기회가 있다면 향후 Jquery의 내부 구현 세부 사항을 구체적으로 분석하는 'Beyond Jquery' 시리즈가 나올 수도 있습니다. 그러나 Jquery 내부에는 잘 이해되지 않는 다양한 사악한 방식이 있으므로 이는 향후 문제입니다.
참고:

http://lifesinger.org/blog/2010/05/array-prototype-slice/