2011-10-04 6 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標準で)配列のようなオブジェクトを作成します。特に、長さプロパティを持ち、lengthプロパティを使用すると、整数ベースのインデックスの下に関連アイテムを配置します。

それは同じくらい簡単です:

:あなたは、 the standard(15.4.4)で、あなたは一人一人の下に、以下の注意事項を参照してくださいよ、特に Array.prototype方法を見てみる場合は

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

注*機能は意図的に汎用です。 この値がArrayオブジェクトである必要はありません。したがって、方法として使用するために他の種類のオブジェクトに に転送することができます。 *関数が をホストオブジェクトに正常に適用できるかどうかは実装依存です。あなたはこれらのアルゴリズムの記述を見れば、彼らはかなりちょうどオブジェクトを反復するためにlengthプロパティを使用します(私たちの場合は配列のようなオブジェクト)と整数ベースそれらの後ろの値にアクセス

キー。その理由から、それらはジェネリックであり、関連するプロパティを持つ通常のjsオブジェクトで動作します。

本質的にそれはすべてjQueryのことです(私が正しく覚えていれば、建物はsizzle、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のWebコンソールでは当てはまりません。これは、それがネイティブjs配列ではないことを示しています。興味深いことに、関数は、実際には機能しておらず、存在し、関数である必要はありません。たとえば:

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

ネイティブJavaScript配列と操作に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> 
関連する問題