快捷導(dǎo)航

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

更新時(shí)間：2012年01月16日 23:23:51 作者：

在javascript中，根本找不到Enumerable的影子，因?yàn)檫@一塊是Prototype作者從Ruby中借鑒過來的。

在javascript中，根本找不到Enumerable的影子，因?yàn)檫@一塊是Prototype作者從Ruby中借鑒過來的。并且Enumerable在實(shí)際中根本沒有直接應(yīng)用的機(jī)會(huì)，都是混入到其他的對(duì)象中，可以說是其他對(duì)象的一個(gè)“父類”（不過只是調(diào)用了Object的extend方法，進(jìn)行了方法的直接拷貝而已）。

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

　　Enumerable其中一個(gè)最重要的方法是each，each這個(gè)方法應(yīng)該都比較熟悉，其作用便是遍歷一個(gè)序列的所有元素，并進(jìn)行相應(yīng)的處理。不過多數(shù)是應(yīng)用在數(shù)組上，比如原生數(shù)組的forEach方法，以及jQuery中的鏈?zhǔn)秸{(diào)用，都依賴于each方法。因?yàn)閖Query選擇器返回的是一個(gè)DOM對(duì)象數(shù)組，然后再在返回的數(shù)組上來調(diào)用each，從而分別處理每一個(gè)元素。

　　一般each都有兩個(gè)參數(shù)：一個(gè)是迭代處理的函數(shù)和方法對(duì)應(yīng)的上下文。

復(fù)制代碼代碼如下:

 
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對(duì)象擴(kuò)展一個(gè)打印當(dāng)前所有元素的print方法。

復(fù)制代碼代碼如下:

 
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并沒有對(duì)應(yīng)到具體的方法，前面說過Enumerable并不之際應(yīng)用，而是作為一個(gè)“父類”應(yīng)用到其他的對(duì)象，因此它的each方法是調(diào)用“子類”_each方法，因此任何混入Enumerable模塊的對(duì)象，都必須提供一個(gè)_each方法，作為作用于實(shí)際循環(huán)的迭代代碼。

現(xiàn)在Array.prototype上實(shí)現(xiàn)一個(gè)_each方法和一個(gè)each方法，實(shí)現(xiàn)一：

復(fù)制代碼代碼如下:

 
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只需要提供一個(gè)iterator參數(shù)就可以了，不過由于_each也被擴(kuò)展到Array.prototype上面，于是實(shí)現(xiàn)的時(shí)候也附帶了context參數(shù)。因此在Enumerable中，并沒有使用_each的第二個(gè)context參數(shù)，是否實(shí)現(xiàn)對(duì)each沒有影響。因此上面的實(shí)現(xiàn)一不應(yīng)該依賴_each的context，于是修改each如下：

復(fù)制代碼代碼如下:

 
Array.prototype.each = function(iterator,context){ 
var index = 0; 
this._each(function(value){ 
iterator.call(context,value,index++); 
}) 
} 

　　這樣一來，each方法的獨(dú)立性提高了，在后續(xù)的Hash中也可以使用這個(gè)Enumerable了。任何看遍歷的對(duì)象，只要提供了_each方法，就可以從Enumerable這里獲得相應(yīng)的方法。

因此，將上面的print例子用Enumerable的形式來實(shí)現(xiàn)，便得到如下的結(jié)果：

復(fù)制代碼代碼如下:

 
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); 
} 
}; 
//下面的實(shí)現(xiàn)源碼中是用的extend方法 
for(var key in Enumerable){ 
Array.prototype[key] = Enumerable[key]; 
}; 
[1,2,3,4].print();//1,2,3,4 