本文章首發於我的公眾號【時不荒】，有任何問題歡迎相互交流~

第①種 未捕獲的引用錯誤: 變數xxx還沒有被定義

Uncaught ReferenceError: xxx is not defined

報錯原因：

即報錯提示所述，你在程式碼中使用了還沒有定義的變數,比如給未定義的變數進行賦值操作

Tips:在非嚴格模式下沒有使用關鍵字宣告變數，變數會自動掛載到window下,並作為它的一個屬性

解決思路：

一般在報錯資訊提示後面都會告知你報錯程式碼所在的檔案及行數

如下圖，則為error.js中的第三行。點選error.js:3即可在瀏覽器上預覽

第②種未捕獲的型別錯誤：xxx不是一個函式

Uncaught TypeError: via.skill.draw is not a function

報錯原因：

在程式碼中將一個非Function型別的屬性進行了函式呼叫

解決思路：

根據瀏覽器提供的報錯資訊，我們可以知道是哪個物件中的哪個屬性被作為方法呼叫了，然後按照報錯提示的程式碼所在行數即可解決此類問題

Tips: 如下程式碼即為呼叫了一個物件中沒有的方法（物件中未定義屬性的值為undefined）

var via = {
    name: 'ViavaCos',
    skill: {
        play: () => {}
    }
}

via.skill.draw() // 呼叫via物件中skill屬性中的draw方法

第③種未捕獲的型別錯誤：無法在 null 中讀取xxx屬性

Uncaught TypeError: Cannot read property 'mustache' of null

報錯原因：

在程式碼中嘗試讀取空值中的某個屬性，比如讀取一個物件中未定義的屬性的某個屬性

Tips: undefined和null同理

解決思路：

找到瀏覽器提示的程式碼行數，找到所讀取屬性的這個物件並梳理程式碼邏輯確認此處物件為何沒有該屬性

第④種未捕獲的範圍錯誤：超過了最大呼叫堆疊大小

Uncaught RangeError: Maximum call stack size exceeded

報錯原因：　　

一般是寫了一個死迴圈導致瀏覽器記憶體溢位了，比如遞迴中沒有寫出口

解決思路：

根據瀏覽器提示錯誤程式碼所在行數，找到這個函式後為其添加出口或調整邏輯

第⑤種 跨域問題

報錯原因：

由於瀏覽器的同源策略限制，被訪問地址必須和訪問者域名，協議，埠一致

解決思路：

1. 讓後端同學在介面配置下 Access-Control-Allow-Origin

2. 使用古老的JSONP方式

Tips: 解決跨域問題不止以上兩中方式，此處僅是提供參考