7 個你應該知道的 JavaScript 原生錯誤類型

做者：Chidume Nnamdi

翻譯：瘋狂的技術宅

原文：https://blog.bitsrc.io/types-...

未經容許嚴禁轉載

從瀏覽器控制檯到運行 Node.js 的終端，咱們處處都會看到錯誤。

本文的重點是概述咱們在 JS 開發過程當中可能遇到的錯誤類型。

提示：良好的錯誤提示會致使快速而無痛的發展經歷與緩慢而痛苦的發展經歷之間的區別。在編寫可重用的代碼時，請確保本身在編寫清晰易懂的錯誤處理代碼。

---

1. RangeError

當數字超出容許的值範圍時，將會拋出此錯誤。

例如

const l = console.logconst arr = [90,88]
arr.length=90**99

咱們有一個數組，帶有兩個元素的 arr。接下來，嘗試將數組擴展爲包含 90**99 == 2.9512665430652753e+193 個元素。

這個數字超出了數組大小能夠增加的範圍。運行它會拋出 RangeError：

$ node errors
errors.js:4
arr.length=90**99
 ^RangeError: Invalid array length

由於咱們要增長 arr 數組的大小超出了 JS 指定的範圍。

2. ReferenceError

當對變量或項目的引用被破壞時，將會引起此錯誤。那是變量或項目不存在。

例如

const l=console.logconst cat = "cat"
cat
dog

有一個變量 cat 被初始化爲 「cat」。接下來引用了 cat 變量和 dog 變量。 cat 變量存在，而 dog 變量不存在。

cat 將返回 「cat」，而 dog 將引起引用錯誤，由於在環境記錄中找不到名稱 dog。

$ node errors
errors.js:3
dog
^ReferenceError: dog is not defined

每當咱們建立或定義變量時，變量名稱都會寫入環境記錄中。環境記錄就像鍵值存儲同樣，

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+

每當咱們引用變量時，它都會存儲程序中定義的變量。當在記錄中找到環境值並提取並返回值時，將以該變量的名稱做爲關鍵字在環境記錄進行搜索。調用還沒有定義的函數。

如今，當咱們建立或定義一個沒有賦值的變量時。變量將其鍵做爲變量名寫入環境記錄，但其值將會保持未定義的狀態。

var catenv record
+-----------------+
| Key | Value |
-------------------
| cat | undefined |
+-----------------+

稍後爲變量分配值時，將在環境記錄中搜索該變量，當發現它未定義值時，該賦值將被覆蓋。

var cat
cat = "cat"env record
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+

因此當在環境記錄中找不到變量名時，JS 引擎將引起 RefernceError。

+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+cat // "cat", yes, :) it's there
dog // :( what's this? can't find it

注意：未定義的變量不會拋出 ReferenceError，由於它在於環境記錄中的值還沒有設置。

3. SyntaxError

這是最多見的錯誤。當咱們輸入 JS 引擎不能理解的代碼時，就會發生這個錯誤。

JS 引擎在解析期間捕獲了這個錯誤。在 JS 引擎中，咱們的代碼經歷了不一樣的階段，而後才能在終端上看到結果。

• 標記化
• 解析
• 解釋

標記化將代碼的源分解爲各個單元。在此階段，將對數字、關鍵字、文字、運算符進行分類並分別標記。

接下來，生成的標記流將會傳遞到解析階段，由解析器處理。這是從標記流生成 AST 的地方。 AST 是代碼結構的抽象表示。

在標記化和解析這兩個階段，若是咱們代碼的語法不符合 JS 的語法規則，則會使該階段失敗並引起 SyntaxError。例如：

const l = console.loglet cat h = "cat"

代碼中的 「h」 表明什麼？這個 「h」 破壞了代碼。

$ node errors
errors.js:3
let cat h = "cat"
 ^SyntaxError: Unexpected identifier

看，Node.js 指出了問題的所在。它說 「h」 是意外的，它破壞了cat 變量的聲明。

所以，能夠說語法錯誤在解析或編譯期間發生。

4. TypeError

當其餘 NativeError 對象中沒有適當的失敗緣由的指示時，TypeError 用於指示操做失敗。

對錯誤的數據類型執行操做時會發生 TypeError，例如：

若是咱們嘗試將數字轉換爲大寫，以下所示：

const num = 123
num.toUpperCase()

這將引起TypeError

$ node errors
errors.js:4
num.toUpperCase()
 ^TypeError: num.toUpperCase is not a function

由於 toUpperCase 函數須要字符串數據類型。 toUpperCase 函數是有意通用的；它不須要其 this 值是 String對象。所以，能夠將其轉移到其餘種類的對象中用做方法。

只有字符串纔會轉換爲大寫或小寫形式，若是咱們在 Objects、Boolean、Symbol、null、undefined 數據類型上調用 toUpperCase 函數，則將會獲得 TypeError，由於它操做的數據類型錯誤。

5. URIError

這代表使用了一種與其定義不兼容的全局 URI 處理函數。

JS 中的 URI（統一資源指示符）具備如下功能：decodeURI、decodeURIComponent 等。

若是咱們用錯誤的參數去調用其中任何一個，將得會到一個 URIError。

decodeURI("%")
^URIError: URI malformed

encodeURI 用於獲取 URI 的未編碼版本。 「％」 不是正確的 URI，所以引起了URIError。

當 URI 編碼或解碼出現問題時，會引起 URIError。

6. EvalError

當使用全局 eval() 函數時，這用於識別錯誤。

根據 EcmaSpec 2018 版：

此規範當前未使用此異常。保留它目的是爲了與本規範的先前版本兼容。

7. InternalError

該錯誤在 JS 引擎內部發生，特別是當它有太多數據要處理而且棧增加超過其關鍵限制的時侯。

當 JS 引擎被過多的遞歸和切換狀況等淹沒時，就會發生這種問題

switch(num) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 1000 cases
 }

如下是一個簡單的過多遞歸的例子：

function foo() {
    foo()
}
foo()

總結

正如咱們所說，誰都會犯錯誤。就咱們敲代碼這件事而言，這是一個穩定的事件。爲了克服它，咱們須要知道能夠拋出的原生錯誤的類型。本文中列出了它們，並提供了一些示例來講明它們是如何引起的。

因此不管何時在終端或瀏覽器中引起錯誤，你均可以輕鬆發現錯誤產生的位置和方式，並可以編寫更好、更不易出錯的代碼。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...