JavaScript 調試常見報錯以及原因

在程序開發中難免會遇到一些錯誤,在成千上萬的代碼中去尋找錯誤很明顯相當於大海撈針,爲此,每種計算機編程語言都要它獨特的一套錯誤處理與調試機制。當然,JavaScript也不例外。但是,接觸過javascript的人都知道,在調試js的過程中有時候真想砸電腦。因爲在調試的過程中,控制檯給出的錯誤非常難以理解,其次給出的行號不總有幫助。雖然很多時候都要靠經驗去判斷,但是控制檯給出的錯誤提示也並不是一點用都沒有。因爲它會給你提供一些信息幫助你去判斷和尋找錯誤的來源。那這些有用的信息是什麼?前面已經說了,每種計算機編程語言都要它獨特的一套錯誤處理與調試機制,每種錯誤都有對應的錯誤類型,而當錯誤發生時,就會拋出相應類型的錯誤對象。JavaScript同樣如此,ECMA-262 定義了下列 7 種錯誤類型:

  1. Error 錯誤
  2. EvalError 全局錯誤
  3. RangeError 引用錯誤
  4. ReferenceError 參數錯誤
  5. SyntaxError 語法錯誤
  6. TypeError 類型錯誤
  7. URIError  編碼錯誤

其中, Error 是基類型,其他錯誤類型都繼承自該類型。因此,所有錯誤類型共享了一組相同的屬性(錯誤對象中的方法全是默認的對象方法) 。 Error 類型的錯誤很少見,如果有也是瀏覽器拋出的,這個基類型的主要目的是供開發人員拋出自定義錯誤。

EvalError 類型的錯誤會在使用 eval() 函數而發生異常時被拋出。ECMA-262 中對這個錯誤有如下描述: “如果以非直接調用的方式使用 eval 屬性的值(換句話說,沒有明確地將其名稱作爲一個Identifier ,即用作 CallExpression 中的 MemberExpression ) ,或者爲 eval 屬性賦值。 ”簡單地說,如果沒有把 eval() 當成函數調用,就會拋出錯誤,例如:

new eval(); //拋出 EvalError

eval = foo; //拋出 EvalError

在實踐中,瀏覽器不一定會在應該拋出錯誤時就拋出 EvalError 。例如,Firefox 4+和 IE8 對第一種情況會拋出 TypeError ,而第二種情況會成功執行,不發生錯誤。有鑑於此,加上在實際開發中極少會這樣使用 eval() ,所以遇到這種錯誤類型的可能性極小。其他類型錯誤在接下來會詳細說明。

 

錯誤類型:

  TypeError類型錯誤)對象用來表示值的類型非預期類型時發生的錯誤

錯誤原因:

  當傳入函數的操作數參數的類型並非操作符或函數所預期的類型時,將拋出一個 TypeError 類型錯誤。

(一)

錯誤信息:

TypeError: 
undefined 
is not a function (Firefox)
Uncaught TypeError: undefined is not a function (Chrome)

錯誤分析:

  Uncaught TypeError: 這部分信息通常不是很有用。Uncaught 表示錯誤沒有被 catch 語句捕獲,TypeError 是錯誤的名字。

  undefined is not a function: 這部分信息,你必須逐字閱讀。比如這裏表示代碼嘗試使用 undefined ,把它當做一個函數。

錯誤實例:

/*
*  當嘗試調用一個像方法的值時,這個值並不是一個方法
*/
var foo = undefined;
foo();   //Uncaught TypeError: foo is not a function

/*
*  當嘗試調用一個對象的方法時,輸錯了名字,也會觸發這個錯誤提示
*/

var x = document.getElementByID('foo');  //Uncaught TypeError: document.getElementByID is not a function

(二)

錯誤信息:

TypeError: foo is not a function (Firefox)
Uncaught TypeError: Cannot read property 'foo' of null (Chrome)

錯誤分析:

  Uncaught TypeError: 這部分信息通常不是很有用。Uncaught 表示錯誤沒有被 catch 語句捕獲,TypeError 是錯誤的名字。

  undefined is not a function: 這部分信息,你必須逐字閱讀。比如這裏表示代碼嘗試使用 undefined ,把它當做一個函數。

錯誤實例:

/*
*  嘗試讀取 
null
 或者 
undefined
 ,把它當成了對象
*/
var someVal = null;
console.log(someVal.foo);


錯誤類型:

  ReferenceError(引用錯誤) 對象表明一個不存在的變量被引用。

錯誤原因:

  當你嘗試引用一個未被定義的變量時,將會拋出一個 ReferenceError引用錯誤 。

錯誤信息:

ReferenceError: invalid assignment left-hand side (Firefox)
Uncaught ReferenceError: Invalid left-hand side in assignment (Chrome)

錯誤實例:

/*
*  嘗試給不能賦值的東西賦值,引起錯誤
*  “left-hand side in assignment” 提及了等號左手邊的部分,因爲左手邊包含不能賦值的東西
*/
function doSomething(){};
if(doSomething() = 'somevalue'){}
;   

/*
*  當嘗試調用一個對象的方法時,輸錯了名字,也會觸發這個錯誤提示
*/

var x = document.getElementByID('foo');  //Uncaught TypeError: document.getElementByID is not a function

 

錯誤類型:

  RangeError

錯誤信息:

RangeError: invalid array length (Firefox)
RangeError: Invalid array length (Chrome)
RangeError: Invalid array buffer length (Chrome)

錯誤原因:

  試圖傳遞一個number參數給一個範圍內不包含該number的函數時則會引發RangeError。當傳遞一個不合法的length值作爲Array 構造器的參數創建數組,或者傳遞錯誤值到數值計算方法(Number.toExponential()Number.toFixed() ,Number.toPrecision()),會出現RangeError

錯誤實例:

/*
*  Array 和 ArrayBuffer 的 length(長度) 屬性被定義爲一個32位無符號整形(unsigned 32-bit integer)的值,所以它只能存儲 0 - 232-1 之間的數。
*  當創建一個長度爲負數或者長度大於等於232 的 
Array
 或者 
ArrayBuffer
 時,或者當設置 
Array.length
 屬性爲負數或者長度大於等於232 的時候就會觸發這個錯誤
*/
new Array(Math.pow(2, 40))
new Array(-1)
new ArrayBuffer(Math.pow(2, 32))
new ArrayBuffer(-1)

let a = [];
a.length = a.length - 1;         // 將 length 屬性的值設置爲 -1

let b = new Array(Math.pow(2, 32) - 1);
b.length = b.length + 1;         // 將 length 屬性的值設置爲 2^32

 

錯誤類型:

  SyntaxError

錯誤原因:

  SyntaxError 對象代表嘗試解析語法上不合法的代碼的錯誤。當Javascript語言解析代碼時,Javascript引擎發現了不符合語法規範的tokens或token順序時拋出SyntaxError。可能是丟失運算符或者轉義字符等。

錯誤實例

/* 
*  因爲沒有使用 ”+“ 操作符來連接字符串,JavaScript 認爲 
log
 函數的參數的值只是 “
PI: ”,在這種情況下,它應該用一個右括號作爲結束。

*/
console.log("PI: " Math.PI);
 //Uncaught SyntaxError: missing ) after argument list

/* 
*  一個字符串字面量少了結尾的引號
*/ 
var a='sd; //Uncaught SyntaxError: Invalid or unexpected token

如何解決:

  [ ] { } ( ) 這幾個符號不配對常常導致出錯。檢查所有的圓括號和方括號是否配對。行號指出的不僅是問題字符。

  Unexpected / 跟正則表達式有關。此時行號通常是正確的。

  Unexpected ; 對象或者數組字面量裏面有個;通常引起這個錯誤,或者函數調用的參數列表裏有個分號。此時的行號通常也是正確的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章