JavaScript在多瀏覽器下雜談1——-for迴圈

文章目錄

• 目錄
• 一、前言
• 二、問題描述
• 三、分析問題
• 四、解決問題
• 五、總結
• 六、常見問題

目錄一、前言二、問題描述三、分析問題四、解決問題五、總結

一、前言

JavaScript語言在不同的瀏覽器的下有存在細微的差異，但不像DOM操作差異那麼大，現在為大家列舉出其中一個"for迴圈"的差異,並介紹如何有效解決這種差異。

二、問題描述

在下面的 測試代碼  例1 中IE6和Chrome輸出的結果是不一致，IE6不執行for語句裡的代碼

//例1：

 alert("準備測試toString是否被for迴圈枚舉出來") var forTest = { toString: 1 } for (i in forTest) {       alert("toString被迴圈出來")//在IE6下這是不執行的,但是在Chrome執行並輸出結果值“1” }

三、分析問題

JavaScript中的對象包含了 'toString', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable','toLocaleString', 'hasOwnProperty', 'constructor'這7個內建方法。這7個內建方法用for語句是無法枚舉出來的。但是IE6和Chrome對內建方法覆蓋的支援不一致。

• IE6:雖然 可以對其內建覆蓋 方法,但是 FOR迴圈無法枚舉 出來。
• Chrome:可以對其內建覆蓋 方法,FOR迴圈也能枚舉出覆蓋的內建方法。

所以上面的 測試代碼 例1 中 IE6和Chrome瀏覽器輸出結果不一致

四、解決問題

我們要解決上面描述的問題,我們要做二件事情:

1. 使用者使用的瀏覽器是否支援 FOR迴圈枚舉出覆蓋的內建方法
2. 如何優雅的解決不相容問題,使所有的瀏覽器都可以 FOR迴圈枚舉出覆蓋的內建方法
3. (解決代碼   例2)

//例2：

enumerables = true,forTest = { toString: 1 }   for (i in forTest) {       enumerables = null;}if (enumerables) {//這些都是Object對象的屬性，有的瀏覽器(ie6)的for迴圈不會把這些屬性給遍曆出來，所以要手功的把屬性遍曆出來   enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable',                  'toLocaleString', 'toString', 'constructor'];}//如果enumerables為null則瀏覽器支援枚舉覆蓋的內建方法,否則只能如下面的代碼強制的把內建方法複製到新的對象中。/** * 所有屬性複製到指定的對象 * @param {Object} object 待合并的對象 * @param {Object} config 來源屬性 * @return {Object} 返回合并後的對象 */ function apply(object, config) {    if (object && config && typeof config === 'object') {        var i, j, k;        //這裡正常的複製對象的方法        for (i in config) {            object[i] = config[i];        }        //相容多瀏覽器把內建的屬性都能重製新的對象中        if (enumerables) {            for (j = enumerables.length; j--;) {                k = enumerables[j];                if (config.hasOwnProperty(k)) {//判斷對象是否有某個特定的屬性。必須用字串指定該屬性。（例如，config.hasOwnProperty("toString")）                    object[k] = config[k];                }            }        }    }    return object;};

現在編寫幾個測試代碼，來驗證我們成果 (測試代碼  例3)

//例3：

var a={};for (i in forTest) {      a[i] = forTest[i];}alert(a.toString) //ie6下複製失敗只能輸入"native code"，並不是輸出我們覆蓋的值var b=apply({},forTest)alert(b.toString)//使用apply函數，在IE6和Chrome輸出的值都是我們預期想得到的覆蓋值”1“

五、總結

1. 筆者猜測在IE6裡的for語句把那7個內建函數標識到忽略列表，所以怎麼覆蓋也不能在for中枚舉出來，而Chrome就能夠智能的把覆蓋後的內建函數複製出來。
2. 使用解決代碼  例2 中的apply函數即可解決多瀏覽器下for迴圈不一致的問題 。

筆者是個菜鳥，也很少寫部落格，如果我表達觀點的有錯，或者有筆誤，還請肯請大鳥們糾正錯誤。

六、常見問題

• 問：為什麼不先判斷瀏覽器的版本是否為IE6,在來設定對應的枚舉方案呢？
  答：我個人的觀點是，我不確定市場那麼多的瀏覽器（PC機就有N種瀏覽器，還有手機瀏覽器,以後也不知道還有什麼新版本的瀏覽器）分別是用什麼機制的for語制。所以就先測試那的for語句的機制。