本文主要介紹javascript中一些常見的錯誤,以及一些用於除錯和處理錯誤的基礎,以幫助我們提高javascript程式碼的質量.

先說下javascript中常見的7種錯誤:

1.變數未定義

下面的語句將隱式的建立一個新的變數abc,並將值123賦給該變數:

<span style="font-size:24px;">abc = 123;</span>

嚴格的講,應該顯式的定義該變數:

<span style="font-size:24px;">var abc = 123;</span>

(實際上,是否使用var關鍵字與變數的作用域有關

但是,如果使用一個未定義的變數,將產生錯誤.例如,如果變數abc事先沒有顯式或隱式的定義,下面語句將產生錯誤:

<span style="font-size:24px;">alert(abc);</span>

2.大小寫敏感

大小寫錯誤是最常見的錯誤之一,但有時是很難發現的.例如,找出下面語句的三處錯誤:

<span style="font-size:24px;">var myName ="Paul";
If(myName=="paul") {
    alert(myName.toUppercase());
}<span style="font-family: 宋體; background-color: rgb(255, 255, 255);"> </span></span>
 

3.不匹配的大括號

4.不匹配的小括號

(上面兩個錯誤類似的,當語句過長時就會發生,當然這些也是很容易發現的.)

5.連線字串時缺少加號(+)

這種錯誤當語句短時發現很容易,但是長了就會非常麻煩,而且不同的瀏覽器報錯提醒是不一樣的.對於IE瀏覽器,提示"Error:Expected(缺少物件)",而對Firefox瀏覽器,則提示"Missing;before statement(在下列語句中缺少;號)".

6.賦值而不是相等

看下面的程式碼:

var myNumber = 99;
if (myNumber=101) {
    alert("myNumber is 101");
}
else {
    alert("myNumber is"+myNumber);
}
 

看完上述程式碼,你是不是想else的字句中的alert()方法將會執行,並提示我們"myNumber is 99"?但事實並非如此.if語句判斷中錯誤的將兩個等號(==)寫成了一個(=),將比較運算子(==)寫成了賦值運算子(=).這是一個非常典型的錯誤.javascript和vb不同,對於vb,賦值操作和比較運算都是一個等號.這個錯誤不會產生錯誤資訊,從而非常容易被忽視.我們要記住的是,當程式的邏輯出現混亂和異常時,可以檢查下是不是這裡出了問題.

補充:

//相等和全等
alert(1 =='1');                        //true，相等對的是值，型別不用比較
alert(1 ==='1');                        //false，全等還需要比較型別
 
alert(1 ==true);                //true，1會隱式轉換為布林值,true== true
alert(1 ===true);                //false，1本身是數值，true本身是布林值

PS：在型別不相等的情況下，建議使用全等 ===

7.將方法誤認為屬性,或者將屬性誤認為方法

這裡常犯的就是在使用方法時忘記在方法名後帶一對圓括號,或者在使用屬性時,在屬性名後帶上多餘的圓括號.例如,下面的程式碼:

var nowDate = new Date;
alert(nowDate.getDay);

第一行中,使用了Date物件的建構函式,該建構函式式Date物件的一個簡單方法,但是,方法名後卻沒有一對圓括號;第二行中,呼叫了Date物件的getDay()方法,卻忘記一

對圓括號.

正確程式碼如下:

var nowDate = new Date();
alert(nowDate.getDay());

錯誤處理

1.try...catch語句

try...catch語句總是成對出現的

try-catch的意義

1.可以通過修改程式碼來排錯的，不需要使用try-catch

2.瀏覽器相容性問題，可以通過判斷瀏覽器或者判斷是否支援某個屬性或方法來判斷，不需要try-catch

比如，無法修改程式碼的情況下，可能會發生錯誤，這個時候用try-catch，網路中斷了

try {
alert(innerWidth);                        //W3C
}catch (e) {
alert(document.documentElement.clientWidth);                        //IE
}

PS：這樣的確能實現相容性問題，但邏輯上是不正確的.因為innerWidth不支援的瀏覽器，可能不一定是IE.

//丟擲錯誤，說明我們自己無法解決，就需要把錯誤報出

try {
new10;
} catch (e) {
if (einstanceof TypeError) {
thrownew TypeError('型別錯誤：例項化new的時候，可能產生了錯誤！');
} else{
//alert(e);                        //這種行為叫做處理錯誤，瀏覽器不抱錯了，因為處理掉了，遮蔽了錯誤顯示
thrownew Error('未知錯誤！');
}
}
 
new10;                        //瀏覽器自己丟擲了錯誤
 
addEvent(window, 'error',function () {
alert('程式發生錯誤了！');
});
 

指令碼偵錯程式