如何讀懂錯(cuò)誤？

首先，讓我們快速看下錯(cuò)誤信息的結(jié)構(gòu)。理解結(jié)構(gòu)有助于理解錯(cuò)誤，如果遇到列表之外的錯(cuò)誤會(huì)減少麻煩。

Chrome 中典型的錯(cuò)誤像這樣：

Uncaught TypeError: undefined is not a function

錯(cuò)誤的結(jié)構(gòu)如下：

Uncaught TypeError：?這部分信息通常不是很有用。Uncaught?表示錯(cuò)誤沒有被?catch?語句捕獲，TypeError?是錯(cuò)誤的名字。

undefined is not a function:?這部分信息，你必須逐字閱讀。比如這里表示代碼嘗試使用?undefined，把它當(dāng)做一個(gè)函數(shù)。

其它基于 webkit 的瀏覽器，比如 Safari ，給出的錯(cuò)誤格式跟 Chrome 很類似。Firefox 也類似，但是不總包含第一部分，最新版本的 IE 也給出比 Chrome 簡(jiǎn)單的錯(cuò)誤 - 但是在這里，簡(jiǎn)單并不總代表好。

以下是真正的錯(cuò)誤。

Uncaught TypeError: undefined is not a function

相關(guān)錯(cuò)誤：

number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

當(dāng)嘗試調(diào)用一個(gè)像方法的值時(shí)，這個(gè)值并不是一個(gè)方法。比如：

var foo = undefined; foo();

如果你嘗試調(diào)用一個(gè)對(duì)象的方法時(shí)，你輸錯(cuò)了名字，這個(gè)典型的錯(cuò)誤很容易發(fā)生。

var x = document.getElementByID('foo');

由于對(duì)象的屬性不存在，默認(rèn)是?undefined?，以上代碼將導(dǎo)致這個(gè)錯(cuò)誤。嘗試調(diào)用一個(gè)像方法的數(shù)字，“number is not a function” 錯(cuò)誤出現(xiàn)。

如何修復(fù)錯(cuò)誤：確保方法名正確。這個(gè)錯(cuò)誤的行號(hào)將指出正確的位置。

Uncaught ReferenceError: Invalid left-hand side in assignment

相關(guān)錯(cuò)誤：

Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

嘗試給不能賦值的東西賦值，引起這個(gè)錯(cuò)誤。

這個(gè)錯(cuò)誤最常見的例子出現(xiàn)在 if 語句使用：

if(doSomething() = 'somevalue')

此例中，程序員意外地使用了單個(gè)等號(hào)，而不是雙等號(hào)。“l(fā)eft-hand side in assignment” 提及了等號(hào)左手邊的部分，因此你可以看到以上例子，左手邊包含不能賦值的東西，導(dǎo)致這個(gè)錯(cuò)誤。

如何修復(fù)錯(cuò)誤：確保沒有給函數(shù)結(jié)果賦值，或者給?this?關(guān)鍵字賦值。

Uncaught TypeError: Converting circular structure to JSON

相關(guān)錯(cuò)誤：

Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

把循環(huán)引用的對(duì)象，傳給?JSON.stringify?總會(huì)引起錯(cuò)誤。

var a = { }; var b = { a: a }; a.b = b; JSON.stringify(a);

由于以上的?a?和?b?循環(huán)引用彼此，結(jié)果對(duì)象無法轉(zhuǎn)換成 JSON。

如何修復(fù)錯(cuò)誤：?移除任何想轉(zhuǎn)換成 JSON 的對(duì)象中的循環(huán)引用。

Unexpected token ;

相關(guān)錯(cuò)誤：

Expected ), missing ) after argument list

JavaScript 解釋器預(yù)期的東西沒有被包含。不匹配的圓括號(hào)或方括號(hào)通常引起這個(gè)錯(cuò)誤，錯(cuò)誤信息可能有所不同 -?“Unexpected token ]”?或者?“Expected {”?等。

如何修復(fù)錯(cuò)誤：?有時(shí)錯(cuò)誤出現(xiàn)的行號(hào)并不準(zhǔn)確，因此很難修復(fù)。

• [ ]?{ }?( )?這幾個(gè)符號(hào)不配對(duì)常常導(dǎo)致出錯(cuò)。檢查所有的圓括號(hào)和方括號(hào)是否配對(duì)。行號(hào)指出的不僅是問題字符。
• Unexpected /?跟正則表達(dá)式有關(guān)。此時(shí)行號(hào)通常是正確的。
• Unexpected ;?對(duì)象或者數(shù)組字面量里面有個(gè)；通常引起這個(gè)錯(cuò)誤，或者函數(shù)調(diào)用的參數(shù)列表里有個(gè)分號(hào)。此時(shí)的行號(hào)通常也是正確的。
  
  

Uncaught SyntaxError: Unexpected token ILLEGAL

相關(guān)錯(cuò)誤：

Unterminated String Literal, Invalid Line Terminator

一個(gè)字符串字面量少了結(jié)尾的引號(hào)。

如何修復(fù)錯(cuò)誤：?確保所有的字符串都有結(jié)束的引號(hào)。

Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

相關(guān)錯(cuò)誤：

TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

嘗試讀取?null?或者?undefined?，把它當(dāng)成了對(duì)象。例如：

var someVal = null; console.log(someVal.foo);

如何修復(fù)錯(cuò)誤：?通常由于拼寫錯(cuò)誤導(dǎo)致。檢查錯(cuò)誤指出的行號(hào)附近使用的變量名是否正確。

Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

相關(guān)錯(cuò)誤：

TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

嘗試寫入?null?或者?undefined?，把它當(dāng)成了一個(gè)對(duì)象。例如：

var someVal = null; someVal.foo = 1;

如何修復(fù)錯(cuò)誤：?也是由于拼寫錯(cuò)誤所致。檢查錯(cuò)誤指出的行號(hào)附近的變量名。

Uncaught RangeError: Maximum call stack size exceeded

相關(guān)錯(cuò)誤：

Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

通常由程序邏輯 bug 引起，導(dǎo)致函數(shù)的無限遞歸調(diào)用。

如何修復(fù)錯(cuò)誤：?檢查遞歸函數(shù)中可能導(dǎo)致無限循環(huán) 的 bug 。

Uncaught URIError: URI malformed

相關(guān)錯(cuò)誤：

URIError: malformed URI sequence

無效的 decodeURIComponent 調(diào)用所致。

如何修復(fù)錯(cuò)誤：?按照錯(cuò)誤指出的行號(hào)，檢查?decodeURIComponent?調(diào)用，它是正確的。

XMLHttpRequest cannot load [http://some/url/](http://some/url/). No ‘Access-Control-Allow-Origin’ header is present on the requested resource

相關(guān)錯(cuò)誤：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [http://some/url/](http://some/url/)

錯(cuò)誤肯定是使用 XMLHttpRequest 引起的。

如何修復(fù)：?確保請(qǐng)求的 URL 是正確的，它遵循同源策略?。最好的方法是從代碼中找到錯(cuò)誤信息指出的 URL 。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

相關(guān)錯(cuò)誤：

InvalidStateError, DOMException code 11

代碼調(diào)用的方法在當(dāng)前狀態(tài)無法調(diào)用。通常由?XMLHttpRequest?引起，在方法準(zhǔn)備完畢之前調(diào)用它會(huì)引起錯(cuò)誤。

var xhr = new XMLHttpRequest(); xhr.setRequestHeader('Some-Header', 'val');

這時(shí)就會(huì)出錯(cuò)，因?yàn)?setRequestHeader?方法只能在?xhr.open?方法之后調(diào)用。

如何修復(fù)：?查看錯(cuò)誤指出的行號(hào)，確保代碼運(yùn)行的時(shí)機(jī)正確，或者在它（例如?xhr.open）之前添加了不必要的調(diào)用

結(jié)論

我看過不少無用的 JavaScript 錯(cuò)誤，比如 PHP 中聲名狼藉的異常?Expected T_PAAMAYIM_NEKUDOTAYIM?。拋出更熟悉的錯(cuò)誤才更有意義。現(xiàn)代瀏覽器不再拋出完全無用的錯(cuò)誤，才會(huì)更有幫助。

轉(zhuǎn)載于:https://www.cnblogs.com/fubi/p/6929818.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的JS常见报错与修复的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。