快速掌握前端開發中的常見錯誤

前言

winter老師的重學前端在刷第二遍，對比第一遍又有了一些更深的瞭解，建議有須要的同窗能夠多看幾遍，若是能把大佬講的知識點都掌握了，距離稱爲大佬就不遠了~，今天咱們採用winter老師推薦的一種學習方式，來了解一下如今瀏覽器中支持的一些Error對象，若是你還在常常在捕獲到錯誤的時候不知道該用哪一個類型，老是習慣於去throw new Error('xx')的話，相信本文會幫你對error有更進一層的瞭解~

定義

首先，咱們要知道的關於Error的內容以下：

1. Error對象是JavaScript的一個內置對象，也就是說全部的js引擎都會默認支持這個對象；
2. 當咱們以函數的形式去使用Error的時候，Error('xx err') 和 new Error('xx err')獲得的結果是同樣的，因此你大能夠省略掉new關鍵字(注意這跟String，Number等內置對象是不同的，後者使用new和不使用new的場景返回的類型是不一樣的~)；
3. 經過Error的構造器能夠建立一個錯誤對象。當運行時錯誤產生時，Error的實例對象會被拋出；

獲取瀏覽器支持的全部Errors對象

這裏以chrome爲例，打開chrome，在console中複製下面的代碼，而後回車拿到結果

Object.getOwnPropertyNames(window).filter(err => err.endsWith ('Error'))
複製代碼

獲得結果以下：

下面咱們分別介紹這些錯誤類型的詳情；

Error

關注指數： 5

1. Error表明一個js中的錯誤對象，當運行時候有錯誤發生，Error的實例對象會被拋出，固然咱們也能夠利用此對象去構造一些自定義的錯誤對象。
2. 參數，從caniuse上能夠查到，大部分的瀏覽器都支持了message 和 filename 和lineno(發生錯誤的代碼行數)，因此咱們使用的時候能夠放心大膽的用~

3. 經過Error能夠擴展JavaScript錯誤類型，舉個例子，定義一個BusinessError以下：

class BusinessError extends Error {
   constructor({message, filename, lineno, ...params}){
    super(message, filename, lineno);
    this.name = 'BusinessError'; // 設置name能夠修改拋出錯誤的name
    // TODO: 僞裝有代碼。。
   }
}
複製代碼

4. 控制檯輸入

Object.getOwnPropertyNames(window).filter(err => err.endsWith('Error')).map(el => window[el].prototype.__proto__.constructor)
複製代碼

能夠看到輸出結果：

除了第一個，從index 1-6 log出來的原型的構造函數都是Error函數，說明這幾個錯誤類型都是繼承自Error，下面分別瞭解一下這幾個錯誤類型的詳細內容。

按照關注指數等級從高(5)到低(0)來排序

ReferenceError

關注指數： 5

ReferenceError，當嘗試引用一個未被定義的變量時，將會拋出一個 ReferenceError 相對而言，這個錯誤類型仍是一個比較重要的錯誤類型，咱們都知道js裏面有一個關鍵字叫undefined，可是要搞清楚的是，undefined的真正意義並不是「未定義」，更貼切的說應該一個變量被聲名了，可是未初始化時候的值是undefined，若是真的去直接使用一個未聲名的變量，就會出現 ReferenceError

控制檯輸入 eeee [一個根本未聲名過的變量]，直接回車就能夠看到報錯信息：

這個錯誤類型在平時開發過程當中仍是比較常見的，若是下次在遇到，就找找是否是哪一個變量沒有聲名就直接使用了~

SyntaxError

關注指數：5

SyntaxError， 字面意思語法錯誤，官方解釋是-對象表明嘗試解析語法上不合法的代碼的錯誤，咱們知道js是一個解釋性語言，在正真運行的過程當中會按照 詞法分析[解析成tokens] => 語法分析[轉爲ast語法樹] => 解釋執行的過程，轉爲ast的過程當中，js的引擎會同時校驗tokens，當它發現不合規範的tokens或者順序不正確的token的時候，就會報出SyntaxError這個錯誤；

控制檯輸入 []{} 和 1.toFixed() ，回車看報錯信息：

能夠看到一半都會帶上是解析到哪一個token的時候出的問題，因此當咱們寫了一些不符合js語法規範的代碼，開發過程當中仍是要注意一些基本語法的正確性的。

TypeError

關注指數：5

TypeError，字面意思類型錯誤，官方解釋-對象用來表示值的類型非預期類型時發生的錯誤，實際的意思其實就是當給了一個錯誤的參數，或者調用了一個錯誤的，並不存在的方法的時候，就會出現這個錯誤，看例子：

當咱們調用了一個不存在方法的時候，就會出現TypeError，因此當咱們寫代碼的時候，必定要注意變量的類型，咱們知道xx()會去調用這個方法，可是實際上它並非一個真正function的時候就會報這個錯。

RangeError

關注指數：3

RangeError 表示數值變量或參數超出其有效範圍，有一種很是常見的場景：[ERROR] : RangeError: Maximum call stack size exceeded.，想必你們都知道這種狀況通常是遞歸過深或者死循環的時候會出現，還有一種比較常見的是new Array的時候給了錯誤的參數，以下：

還有一些特殊的狀況會致使這個錯誤，有興趣的同窗能夠去自行了解一下~

URLError

關注指數：1

URLError，是一個比較固定場景下會出現的錯誤，decodeURI, encodeURI, encodeURIComponent, decodeURIComponent當這幾個方法在處理url過程當中出現錯誤致使decode或者encode失敗的狀況下，就會拋出這個類型的錯誤，這個場景只要記住看到這個類型，就說明是這幾個api的問題就能夠了。

EvalError

關注指數：0

EvalError 表明了一個關於eval函數報錯的類型，可是目前大部分場景下已經用不到這個類型了，JavaScript不會再拋出此類型的錯誤，可是會保持這個類型的兼容性，因此對這個錯誤類型能夠沒必要給與太多的關係。

Error之外的一些錯誤類型

以上咱們就把全部繼承自Error的錯誤都瞭解完了，下面咱們整理一下剩餘的一些錯誤，雖然不是很常見，可是留個印象，遇到的時候能想起來就能夠了。

RTCError

這個就不給關注指數了，這個是在使用rtc(網頁即時通信)技術過程當中可能會出現的一個錯誤類型，它是繼承自DOMException這個類型的，因此若是你正在從事相關內容開發的話仍是須要關注一下的，而咱們日常不涉及到的，我以爲等你用的時候再去關注也是沒啥問題的。

OverconstrainedError

這個也不給關注指數，一樣是一個特定場景才須要關注的問題，瀏覽器提供了讓開發者向用戶獲取音頻和視頻權限的api，經過調用MediaDevices.getUserMedia(param)便可，其中param中能夠同配置來決定是要音頻的權限(錄音)仍是視頻的權限(攝像頭)，若是是攝像頭，甚至能夠配置須要的分辨率等配置，當配置的分辨率用戶機器上沒有，或者達不到的時候，就會報這個錯誤類型，若是有須要的小夥伴能夠自行去查閱這部分的資料~，我附上mdn的地址

DOMError

關注指數：-1

這個API已經被Deprecated了，不要在關注了~

MediaError

關注指數：4

MediaError，用在基於HTMLMediaElement的標籤，好比<video/>和<audio/>標籤，當這些媒體資源使用過程當中報錯就會觸發這個錯誤類型，它包含了2部分，一個是code，表明錯誤的大概類型，另外一個message，表示錯誤的詳細信息，具體的內容，能夠查看介紹

webkitSpeechRecognitionError

這個也不給關注指數，這個錯誤首先是基於一個瀏覽器的實驗特性-語音識別來的，由於是在chrome中因此會有webkit前綴，實際上應該是不帶私有前綴的，這個錯誤會在語音識別自己過程出錯的時候被拋出，有須要的小夥伴能夠到這裏去查看相關的內容

總結

以上，咱們就把全部chrome瀏覽器中支持的錯誤類型都講完了，可能在平常開發中須要關注的仍是Error以及繼承自Error的一些錯誤，至少要作到錯誤發生的時候知道是什麼問題致使的，也好快速定位相關的問題代碼所在，若是你有什麼好的想法或者建議，歡迎評論留言~