JavaScript的9個陷阱及評點

　　來自 Nine Javascript Gotchas 以下是JavaScript容易犯錯的九個陷阱雖然不是什麼很高深的技術問題但注意一下會使您的編程輕松些即所謂make life easier 筆者對某些陷阱會混雜一些評點

　　　最後一個逗號

　　如這段代碼注意最後一個逗號按語言學角度來說應該是不錯的（python的類似數據類型辭典dictionary就允許如此）IE會報語法錯誤但語焉不詳你只能用人眼從幾千行代碼中掃描

　　<script>
var theObj = {
city : Boston
state : MA
}
</script>

　　　this的引用會改變

　　如這段代碼

　　<input type=button value=Gotcha! id=MyButton >
<script>
var MyObject = function () {
    thisalertMessage = Javascript rules;
    thisClickHandler = function() {
        alert(thisalertMessage );
}
}();
documentgetElementById(theText)onclick = MyObjectClickHandler
</script>

　　並不如你所願答案並不是JavaScript rules在執行MyObjectClickHandler時代碼中紅色這行this的引用實際上指向的是documentgetElementById(theText)的引用可以這麼解決

　　<input type=button value=Gotcha! id=theText >
<script>
var MyObject = function () {
    var self = this;
    thisalertMessage = Javascript rules;
    thisOnClick = function() {
        alert(selfvalue);
    }
}();
documentgetElementById(theText)onclick = MyObjectOnClick
</script>

　　實質上這就是JavaScript作用域的問題如果你看過你會發現解決方案不止一種

　　　標識盜賊

　　在JavaScript中不要使用跟HTML的id一樣的變量名如下代碼

　　<input type=button id=TheButton>
<script>
TheButton = get(TheButton);
</script>

　　IE會報對象未定義的錯誤我只能說IE sucks

　　　字符串只替換第一個匹配

　　如下代碼

　　<script>
var fileName = This is a titlereplace( _);
</script>

　　而實際上結果是This_is a title 在JavaScript中Stringreplace的第一個參數應該是正則表達式所以正確的做法是這樣

　　var fileName = This is a titlereplace(/ /g_);

　　　mouseout意味著mousein

　　事實上這是由於事件冒泡導致的IE中有mouseenter和mouseleave但不是標准的作者在此建議大家使用庫比如YUI來解決問題

　　　parseInt是基於進制體系的

　　這個是常識可是很多人給忽略了parseInt還有第二個參數用以指明進制比如parseInt()如果你認為答案是那就錯了因為在此字符串以開頭parseInt以八進制來處理它在八進制中是非法返回false布爾值false轉化成數值就是因此正確的做法是parseInt( )

　forin會遍歷所有的東西

　　有一段這樣的代碼

　　var arr = []
var total = ;
for ( var x in arr) {
total = total * arr[x];
}

　　運行得好好的不是嗎？但是有一天它不干了給我返回的值變成了NaN 暈我只不過引入了一個庫而已啊原來是這個庫改寫了Array的prototype這樣我們的arr平白無過多出了一個屬性（方法）而forin會把它給遍歷出來所以這樣做才是比較安全的

　　for ( var x = ; x < arrlength; x++) {
total = total * arr[x];
}

　　其實這也是污染基本類的prototype會帶來危害的一個例證

　　　事件處理器的陷阱

　　這其實只會存在使用作為對象屬性的事件處理器才會存在的問題比如windowonclick = MyOnClickMethod這樣的代碼這會復寫掉之前的windowonclick事件還可能導致IE的內容洩露（sucks again）在IE還沒有支持DOM 的事件注冊之前作者建議使用庫來解決問題比如使用YUI:

　　YAHOOutilEventaddListener(window click MyOnClickMethod);

　　這應該也屬於常識問題但新手可能容易犯錯

　　　Focus Pocus

　　新建一個input文本元素然後把焦點挪到它上面按理說這樣的代碼應該很自然

　　var newInput = documentcreateElement(input);
documentbodyappendChild(newInput);
newInputfocus();
newInputselect();

　　但是IE會報錯（sucks again and again）理由可能是當你執行fouce()的時候元素尚未可用因此我們可以延遲執行

var newInput = documentcreateElement(input);
newInputid = TheNewInput;
documentbodyappendChild(newInput);
setTimeout(function(){ //這裡我使用閉包改寫過若有興趣可以對比原文
documentgetElementById(TheNewInput)focus();
documentgetElementById(TheNewInput)select();} );

　　在實踐中JavaScript的陷阱還有很多很多大多是由於解析器的實現不到位而引起這些東西一般都不會在教科書中出現只能靠開發者之間的經驗分享謝天謝地我們生活在網絡時代很多碰到的問題一般都可以在Google中找到答案

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19388.html