Day17 | JS 常見的錯誤類型

發表於 分類於
開發者工具顯示 Uncaught SyntaxError 與 Uncaught ReferenceError 錯誤訊息的除錯方式

前言

在六角學院的「 JavaScript 核心篇 」中常遇到開發者工具顯示 Uncaught SyntaxError 與 Uncaught ReferenceError 錯誤訊息，藉此篇文章整理開發中常遇到的錯誤訊息們，方便日後除錯翻閱。

❐ JavaScript 常見的錯誤類型 ( Error Reference )

  • SyntaxError
  • ReferenceError
  • TypeError
  • RangeError
  • URIError

❐ SyntaxError 語法錯誤

SyntaxError 通常為語法結構的錯誤，此錯誤結構有時候也可以透過 VSCdoe 的提示來查看，結構有問題的地方 VSCode 會顯示紅色毛毛蟲樣式。

範例 1. 函式缺少結尾 }

1
2
function callName() {
  console.log('Hello, 媽');

callName() 結尾少了 }，開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

範例 2. 結尾符號不正確

1
let myName = 'Carrie',

正確寫法應為 let myName = 'Carrie'; 而非逗號，開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

❐ ReferenceError 參考、引用錯誤

ReferenceError 錯誤類型較常在執行階段才會看到錯誤，編輯器中不一定會顯示錯誤，除非裝 ESLint 工具，可透過下面方式進行除錯。

除錯重點

  • 可透過 Chrome 開發者工具的錯誤訊息排錯。
  • 於 JS 撰寫的開發環境中 ( 例如 VSCode ) 裝 ESLint 工具。

範例1.

1
2
console.log(Ming);
let Ming = '小明';

因為 let 宣告變數，變數在創造階段會位於暫時性死區，而 console.log(Ming); 在 Ming = '小明'; 之前，自然讀取不到 Ming 的值，會顯示 Uncaught ReferenceError: Cannot access 'Ming' before initialization 錯誤訊息。

範例 2. 呼叫為宣告的變數

1
console.log(Ming);

會顯示錯誤訊息 Uncaught ReferenceError: Ming is not defined。

❐ TypeError 型別錯誤

TypeError 錯誤訊息不會顯示於編輯器中，也是須於執行環境中才會看到錯誤訊息。

除錯重點

  • 可透過 Chrome 開發者工具的錯誤訊息排錯。
  • 在要取變數、重新賦予變數新值，先確認此變數的資料型別與結構。
    • const 不能重新賦予值。
    • undefined  與 null  無法再增加屬性。

範例 1. const 重新賦予值

1
2
const Ming = '小明';
Ming = '大明';

由於 const 不能重新賦予值，所以會顯示錯誤訊息 Uncaught TypeError: Assignment to constant variable 。

範例 2. undefined  與 null 新增屬性

1
2
null.name = 'Hi';
undefined.callMe = 'Hello';

由於 undefined  與 null  無法再增加屬性，所以分別會顯示錯誤訊息：

  • Uncaught TypeError: Cannot set properties of null (setting 'name')
  • Uncaught TypeError: Cannot set properties of undefined (setting 'callMe')

範例 3. 對 undefined 的值新增屬性

1
2
3
4
var family = {
  dog: 2,
}
family.father.child = 3;

錯誤訊息：Uncaught TypeError: Cannot set properties of undefined (setting 'child')

  • 因為 father 並沒有定義 ( 不存在 )，所以它的值為 undefined ，在 undefined 上是無法新增任何屬性。

❐ RangeError 範圍錯誤

RangeError 錯誤訊息的原因為

  • 無效的陣列長度
  • 過度執行函式，會產生過多執行堆疊
    • 需檢視程式碼的邏輯找出問題點，否則會過去消耗硬體資源。

範例 1. 無效的陣列長度

1
2
let ary = ['A'];
ary.length = ary.length - 2;

錯誤訊息 Uncaught RangeError: Invalid array length

範例 2. 函式自己呼叫自己

1
2
3
(function fn(){
  fn();
})();

執行堆疊超過環境限制，錯誤訊息 Uncaught RangeError: Maximum call stack size exceeded

❐ URIError Url 錯誤

Url 解析不成功的原因為：傳遞給「 decodeURI、encodeURL、encodeURIComponent、decodeURIComponent 」這些函數的參數不合格，導致函數無法正確對它進行解析。

範例1. decodeURL

1
2
3
4
5
// 錯誤: Uncaught URIError: URI malformed at decodeURI
decodeURI('%carrie');

// 正確
decodeURI('%25carrie');

參考資訊