Enumerableのeach, _eachまわりの整理(prototype.jsソースコード分析)

• 前回までElement近辺を探っていたが行き詰ったのでとりあえずストップし、分かるところに立ち返ってさらに掘り下げて行くのと、実際にアプリケーションなりを作っていってみようと思います

eachを分かりやすくソースコードに近づけていく。

• この形でhogeではなくarrayのvalueを取得したい

<script>
Array.prototype.each = function(){
	alert('hoge');
}

var array = ['aaa', 'bbb'];
array.each();

</script>

その2

• オブジェクトのメソッドなのでthisが使える。(当たり前だけどスゴイといちいち思ってしまう)
• 配列の要素と値にアクセスできましたっと。。

<script>
Array.prototype.each = function(){
	for(var i=0; i<this.length; i++){
		alert(this[i] + " : " + i);
	}
}

var array = ['aaa', 'bbb'];
array.each();

</script>

その3

• 配列にアクセスするロジックと結果の表示方法を分離したい。

<script>
Array.prototype.each = function(){
	for(var i=0; i<this.length; i++){
		(function(value){
			alert(value + " : " + i);
		})(this[i]);
	}
}

var array = ['aaa', 'bbb'];
array.each();
</script>

その4

• さらに抽象化

<script>
Array.prototype.each = function(iterator){
	for(var i=0; i<this.length; i++){
		iterator(this[i], i);
	}
}

var array = ['aaa', 'bbb'];

var iterator = function(e, i){
	alert(e + ' : ' + i);
}

array.each(iterator);

</script>

まとめ

• eachメソッドだけを見て自然に抽象化できるのは自分のレベルではここまでです。その他のメソッドのコードをもっと読み進んでいけばソースコードのような形が一番合理的な形なのだろうと納得できると思います。
• スゴイなしかし。

<script>
Array.prototype.each = function(iterator){
	var index = 0;
	for(var i=0; i<this.length; i++){
		iterator(this[i], index++);
	}
}

var array = ['aaa', 'bbb'];

var iterator = function(e, i){
	alert(e + ' : ' + i);
}

array.each(iterator);

</script>