筆記-JavaScript class保留字

在發現Kendo UI Grid隱藏功能-指定欄位CSS一文的範例中，我提到用

{ field: "price", title: "Price ($)", attributes: { class:"right-align", "data-boo": "foo" } }

的寫法來指定<td>的class Attribute。(註: 原文已修正)

同事使用IE8檢視，該段程式傳出SCRIPT1028: Expected identifier, string or number 錯誤，追查發現錯誤發生在宣告attributes物件之處，很巧合地，前幾天Wade剛好也提到相關議題: jQuery.attr('class')與jQuery.attr('className')的差異，Dino在回應中提到class是JavaScript的保留字，這點印象給了我靈感，試著改寫成{ "class": "right-align" }，問題消失。(這一分打點歸Wade與Dino所有~)

回頭研究"class"，說是保留字，但為什麼從來沒在JavaScript程式碼中看過有人用它? 原來，class是一個"保留供未來使用的保留字"，在JavaScript 2.0中，會用class取代現行以function + prototype模擬物件導向的做法，但截至目前，主流瀏覽器全部都只支援到JavaScript 1.x，無怪乎從沒看人用過!

另一個問題是，當初開發時用Chrome, FF, IE9測過{ class: "right-align” }寫法沒出事，可見各瀏覽器版本對於是否允許class也有不同標準? 寫了一小段程式來測試:

var obj = { class: "className" };
alert(obj.class);

測試結果:

• IE9標準模式: 正常
• IE9相容模式: SCRIPT1028: Expected identifier, string or number
• IE8: SCRIPT1028: Expected identifier, string or number
• Firefox 16: 正常
• Chrome 21: 正常
• Safari 5.1: 正常
• Opera 12: 正常