前端開發中常遇到的幾種報錯類型
本文章首發于我的公衆号【時不荒】，有任何問題歡迎互相交流~
第①種 未捕獲的引用錯誤: 變量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: 解決跨域問題不止以上兩中方式，此處僅是提供參考