快捷導(dǎo)航

JavaScript在多瀏覽器下for循環(huán)的使用方法

更新時(shí)間：2012年11月07日 10:17:21 作者：

JavaScript語(yǔ)言在不同的瀏覽器的下有存在細(xì)微的差異，但不像DOM操作差異那么大，現(xiàn)在為大家列舉出其中一個(gè)"for循環(huán)"的差異,并介紹如何有效的解決這種差異

一、前言
JavaScript語(yǔ)言在不同的瀏覽器的下有存在細(xì)微的差異，但不像DOM操作差異那么大，現(xiàn)在為大家列舉出其中一個(gè)"for循環(huán)"的差異,并介紹如何有效的解決這種差異。

二、問(wèn)題描述
在下面的測(cè)試代碼例1 中IE6和Chrome輸出的結(jié)果是不一致，IE6不執(zhí)行for語(yǔ)句里的代碼

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

 
//例1： 
alert("準(zhǔn)備測(cè)試toString是否被for循環(huán)枚舉出來(lái)") 
var forTest = { toString: 1 } 
for (i in forTest) { 
alert("toString被循環(huán)出來(lái)")//在IE6下這是不執(zhí)行的,但是在Chrome執(zhí)行并輸出結(jié)果值“1” 
} 

三、分析問(wèn)題
JavaScript中的對(duì)象包含了 'toString', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable','toLocaleString', 'hasOwnProperty', 'constructor'這7個(gè)內(nèi)置方法。這7個(gè)內(nèi)置方法用for語(yǔ)句是無(wú)法枚舉出來(lái)的。但是IE6和Chrome對(duì)內(nèi)置方法覆蓋的支持不一致。
IE6:雖然可以對(duì)其內(nèi)置覆蓋方法,但是 FOR循環(huán)無(wú)法枚舉出來(lái)。
Chrome:可以對(duì)其內(nèi)置覆蓋方法,FOR循環(huán)也能枚舉出覆蓋的內(nèi)置方法。
所以上面的測(cè)試代碼例1 中 IE6和Chrome瀏覽器輸出結(jié)果不一致

四、解決問(wèn)題
我們要解決上面描述的問(wèn)題,我們要做二件事情:
用戶使用的瀏覽器是否支持 FOR循環(huán)枚舉出覆蓋的內(nèi)置方法
如何優(yōu)雅的解決不兼容問(wèn)題,使所有的瀏覽器都可以 FOR循環(huán)枚舉出覆蓋的內(nèi)置方法
(解決代碼例2)

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

 
//例2： 
enumerables = true, 
forTest = { toString: 1 } 
for (i in forTest) { 
enumerables = null; 
} 
if (enumerables) {//這些都是Object對(duì)象的屬性，有的瀏覽器(ie6)的for循環(huán)不會(huì)把這些屬性給遍歷出來(lái)，所以要手功的把屬性遍歷出來(lái) 
enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable', 
'toLocaleString', 'toString', 'constructor']; 
} 

//如果enumerables為null則瀏覽器支持枚舉覆蓋的內(nèi)置方法,否則只能如下面的代碼強(qiáng)制的把內(nèi)置方法復(fù)制到新的對(duì)象中。 
/** 
* 所有屬性復(fù)制到指定的對(duì)象 
* @param {Object} object 待合并的對(duì)象 
* @param {Object} config 來(lái)源屬性 
* @return {Object} 返回合并后的對(duì)象 
*/ 
function apply(object, config) { 
if (object && config && typeof config === 'object') { 
var i, j, k; 
//這里正常的復(fù)制對(duì)象的方法 
for (i in config) { 
object[i] = config[i]; 
} 
//兼容多瀏覽器把內(nèi)置的屬性都能重制新的對(duì)象中 
if (enumerables) { 
for (j = enumerables.length; j--;) { 
k = enumerables[j]; 
if (config.hasOwnProperty(k)) {//判斷對(duì)象是否有某個(gè)特定的屬性。必須用字符串指定該屬性。（例如，config.hasOwnProperty("toString")） 
object[k] = config[k]; 
} 
} 
} 
} 
return object; 
}; 

現(xiàn)在編寫幾個(gè)測(cè)試代碼，來(lái)驗(yàn)證我們成果 (測(cè)試代碼例3)

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

 
//例3： 
var a={}; 
for (i in forTest) { 
a[i] = forTest[i]; 
} 
alert(a.toString) //ie6下復(fù)制失敗只能輸入"native code"，并不是輸出我們覆蓋的值 
var b=apply({},forTest) 
alert(b.toString)//使用apply函數(shù)，在IE6和Chrome輸出的值都是我們預(yù)期想得到的覆蓋值”1“ 

五、總結(jié)
筆者猜測(cè)在IE6里的for語(yǔ)句把那7個(gè)內(nèi)置函數(shù)標(biāo)識(shí)到忽略列表，所以怎么覆蓋也不能在for中枚舉出來(lái)，而Chrome就能夠智能的把覆蓋后的內(nèi)置函數(shù)復(fù)制出來(lái)。
使用解決代碼例2 中的apply函數(shù)即可解決多瀏覽器下for循環(huán)不一致的問(wèn)題。
筆者是個(gè)菜鳥，也很少寫博客，如果我表達(dá)觀點(diǎn)的有錯(cuò)，或者有筆誤，還請(qǐng)肯請(qǐng)大鳥們糾正錯(cuò)誤。

六、常見問(wèn)題
問(wèn)：為什么不先判斷瀏覽器的版本是否為IE6,在來(lái)設(shè)置對(duì)應(yīng)的枚舉方案呢？
答：我個(gè)人的觀點(diǎn)是，我不確定市場(chǎng)那么多的瀏覽器（PC機(jī)就有N種瀏覽器，還有手機(jī)瀏覽器,以后也不知道還有什么新版本的瀏覽器）分別是用什么機(jī)制的for語(yǔ)制。所以就先測(cè)試那的for語(yǔ)句的機(jī)制。

您可能感興趣的文章: