Prototype源碼淺析 Enumerable部分之each方法

在javascript中，根本找不到Enumerable的影子，因為這一塊是Prototype作者從Ruby中借鑒過來的。並且Enumerable在實際中根本沒有直接應用的機會，都是混入到其他的對象中，可以說是其他對象的一個“父類”（不過只是調用了Object的extend方法，進行了方法的直接拷貝而已）。

　　我並不熟悉Ruby，不過看Enumerable中的一些方法，倒是跟Python中的有幾分相似。

　　Enumerable其中一個最重要的方法是each，each這個方法應該都比較熟悉，其作用便是遍曆一個序列的所有元素，並進行相應的處理。不過多數是應用在數組上，比如原生數組的forEach方法，以及jQuery中的鏈式調用，都依賴於each方法。因為jQuery選取器返回的是一個DOM對象數組，然後再在返回的數組上來調用each，從而分別處理每一個元素。

　　一般each都有兩個參數：一個是迭代處理的函數和方法對應的上下文。
複製代碼 代碼如下:
var each = Array.prototype.forEach || function(iterator,context){
for(var i = 0,len = this.length ; i < len ; i++){
iterator.call(context,this[i],this);
}
};

　　按照上面的方法，我們給Array對象擴充一個列印當前所有元素的print方法。
複製代碼 代碼如下:
Array.prototype.each = Array.prototype.forEach || function(iterator,context){
for(var i = 0,len = this.length ; i < len ; i++){
iterator.call(context,this[i],i,this);
}
};
Array.prototype.print = function(){
this.each(function(item){
console.log(item);
});
}
console.log([1,2,3,4].print());//1,2,3,4

　　在Enumerable中，each並沒有對應到具體的方法，前面說過Enumerable並不之際應用，而是作為一個“父類”應用到其他的對象，因此它的each方法是調用“子類”_each方法，因此任何混入Enumerable模組的對象，都必須提供一個_each方法，作為作用於實際迴圈的迭代代碼。

現在Array.prototype上實現一個_each方法和一個each方法，實現一：
複製代碼 代碼如下:
Array.prototype.each = function(iterator,context){
this._each(iterator,context)
}
Array.prototype._each = function(iterator,context){
for(var i = 0,len = this.length ; i < len ; i++){
iterator.call(context,this[i],i,this);
}
};

　　按照先前說的，_each只需要提供一個iterator參數就可以了，不過由於_each也被擴充到Array.prototype上面，於是實現的時候也附帶了context參數。因此在Enumerable中，並沒有使用_each的第二個context參數，是否實現對each沒有影響。因此上面的實現一 不應該依賴_each的context，於是修改each如下：
複製代碼 代碼如下:
Array.prototype.each = function(iterator,context){
var index = 0;
this._each(function(value){
iterator.call(context,value,index++);
})
}

　　這樣一來，each方法的獨立性提高了，在後續的Hash中也可以使用這個Enumerable了。任何看遍曆的對象，只要提供了_each方法，就可以從Enumerable這裡獲得相應的方法。

因此，將上面的print例子用Enumerable的形式來實現，便得到如下的結果：
複製代碼 代碼如下:
var Enumerable = {};
Enumerable.each = function(iterator, context) {
var index = 0;
this._each(function(value){
iterator.call(context, value, index++);
});
return this;
};
Enumerable.print = function(){
this.each(function(item){
console.log(item);
})
};
Array.prototype._each = function(iterator,context){
for(var i = 0,len = this.length ; i < len ; i++){
iterator.call(context,this[i],i,this);
}
};
//下面的實現源碼中是用的extend方法
for(var key in Enumerable){
Array.prototype[key] = Enumerable[key];
};
[1,2,3,4].print();//1,2,3,4

理解each的實現是理解Enumerable對象的關鍵，後面的Array和Hash都混入Enumerable對象，頗為重要。
轉載請註明來自小西山子【http://www.cnblogs.com/xesam/】