Javascriptの本を読んでいると'配列のようなオブジェクト'という文言をよく見かける。
関数の中で参照可能なargumentsというオブジェクトやdocument.getElementsByTagNameメソッド呼び出しによって得られる'NodeList'というオブジェクトなんかがそうだ。
例えばこれらのオブジェクトに対して
var ele = document.getElementsByTagName('li'); alert(ele instanceof Array);
こんな風にinstanceof演算子を適用しても'false'になってしまう。
なぜ'配列のような'と言われるかというと
ele[0];
のようにアクセスが出来て
for (var i = 0; i < ele.length; i++) {}
のようにループ処理が出来るからだ。
ただし'配列のような'と言われている以上は実際は配列ではない。
つまりは
ele.slice();
や
ele.push();
等の配列用メソッドが使えないということになる。
ただしこれら'配列のようなオブジェクト'を本物の配列にしてしまう方法がある。
Function.applyやFunction.callを使えばいい。
例えば
ele = Array.prototype.slice.call(ele);
こうして得られたele変数は本物の配列になっている。
alert(ele instanceof Array);
とすれば今度は'true'を得ることが出来る。もちろん
ele.reverse();
等という配列用のメソッドも使えるようになっている。
forループを使わずに<li>タグすべてにイベントを設定するのもこんな風に書ける。
window.addEventListener('load', function(evt) { var li = document.getElementsByTagName('li'); Array.prototype.map.call(li, function(e) { e.addEventListener('click', function(evt) { alert(evt.target.innerHTML); }, false); }); }, false);
ちなみにmapという配列用メソッドはJavascript 1.6以上から実装されている。
あと上のコードはもちろんIEでは動かない。
addEventListenerが実装されていないからだ。
カテゴリ:
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/42
コメントする