一,為什麼不要用for in語句
jqModal這個jquery插件估計很多人都使用過,在jqModal源碼內部,有一個函數為hs,其中有個嵌套循環如下,
代碼如下:
for(var i in {jqmShow:1,jqmHide:1})
for(var s in this[i])
if(H[this[i][s]])
H[this[i][s]].w[i](this);
return F;
}
第一個for in遍歷的目標是個匿名對象,沒有問題。
第二個for in遍歷,根據上下文確認this[i]是一個數組對象(Array)。
很多JS先驅者都告誡過我們不要對數組對象使用for in語句進行遍歷,原因除了性能外,還有可能產生意料之內的bug。不聽先人言,吃虧在眼前呵呵。
今天偶拿jqModal為例,說明下這種bug到底什麼時候會出現,當引以為戒。
二,問題重現
關鍵詞:原生Array類、擴展Array類
for in 語句對數組對象進行遍歷潛在的bug在於:如果原生Array類被其他的js腳本庫進行了原型擴展(比如多加一個toJSON方法即Array.prototype.toJSON=xxxx),那麼用for in遍歷擴展後的Array對象的邏輯將與遍歷原生Array對象的邏輯發生差異。
舉個簡單的例子,
代碼如下:
var x=[1];
for(var s in x){
alert(s);
};
按常理,如果Array是原生js類,上面語句應該只執行一次alert方法,且s為數組的索引0。但是,如果Array類被擴展了,多了一個toJSON方法,那麼上面的語句將執行兩次alert,第一次s為索引0,第二次s為方法名'toJSON'。
如果你設計的代碼的邏輯以原生Array類為基准,在某一天你的同事在頁面裡面引用了一個第三方的JS庫,這個庫又恰好擴展了Array類,結果將難以想象,很有可能原來的代碼邏輯將不再成立。
關於這種擴展原生JS類的庫,很有名的一個就是prototype.js,它給Array類擴展了很多方法諸如toJSON,each等等。我現在明白為啥jquery的創始人曾經對prototype火大了(不少人因為特殊原因在一個頁面裡用jquery同時又用prototype,會有很多意料之外的沖突問題,僅僅一個noConflict是無法解決的)。另外,jqModal的作者如果看得懂我這篇文章估計也會對埋怨prototype,說:“我用for in對數組遍歷是不明智的,但是更該死的還是prototype。。。”
如上所述,如果你在用jqModal,同時因為別的原因在用prototype,恭喜你中招了。沖突將導致jqModal的彈框在ie6、ie7下面將無法利用closeClass設置的按鈕進行自動關閉。跟蹤調試代碼你將發現,異常的地方就在本文開頭提到的hs方法的for in 循環中。。。
三,解決問題
遍歷數組的地方,用for var 語句代替for in。