JavaScript 錯誤以及如何修復

jopen 9年前發布 | 16K 次閱讀 JavaScript開發 JavaScript

原文《JavaScript Errors and How to Fix Them
作者:Jani Hartikainen
翻譯:涂鴉碼農

</blockquote>

JavaScript 調試是一場噩夢:首先給出的錯誤非常難以理解,其次給出的行號不總有幫助。有個查找錯誤含義,及修復措施的列表,是不是很有用?

以下是奇怪的 JavaScript 錯誤列表。同樣的錯誤,不同的瀏覽器會給出不同的消息,因此有一些不同的例子。

如何讀懂錯誤?

首先,讓我們快速看下錯誤信息的結構。理解結構有助于理解錯誤,如果遇到列表之外的錯誤會減少麻煩。

Chrome 中典型的錯誤像這樣:

</tr> </tbody> </table>

錯誤的結構如下:

  1. Uncaught TypeError:這部分信息通常不是很有用。Uncaught表示錯誤沒有被catch語句捕獲,TypeError是錯誤的名字。

    </li>

  2. undefined is not a function: 這部分信息,你必須逐字閱讀。比如這里表示代碼嘗試使用undefined,把它當做一個函數。

    </li> </ol>

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

    以下是真正的錯誤。

    Uncaught TypeError: undefined is not a function

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

    當嘗試調用一個像方法的值時,這個值并不是一個方法。比如:

1
Uncaught TypeError: undefined is not a function 

</tr> </tbody> </table>

如果你嘗試調用一個對象的方法時,你輸錯了名字,這個典型的錯誤很容易發生。

1
2
var foo = undefined;
foo();

</tr> </tbody> </table>

由于對象的屬性不存在,默認是undefined,以上代碼將導致這個錯誤。

嘗試調用一個像方法的數字,“number is not a function” 錯誤出現。

如何修復錯誤:確保方法名正確。這個錯誤的行號將指出正確的位置。

Uncaught ReferenceError: Invalid left-hand side in assignment

相關錯誤:Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

嘗試給不能賦值的東西賦值,引起這個錯誤。

這個錯誤最常見的例子出現在 if 語句使用:

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

</tr> </tbody> </table>

此例中,程序員意外地使用了單個等號,而不是雙等號。“left-hand side in assignment” 提及了等號左手邊的部分,因此你可以看到以上例子,左手邊包含不能賦值的東西,導致這個錯誤。

如何修復錯誤:確保沒有給函數結果賦值,或者給this關鍵字賦值。

Uncaught TypeError: Converting circular structure to JSON

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

把循環引用的對象,傳給JSON.stringify總會引起錯誤。

1
if(doSomething() = 'somevalue')

</tr> </tbody> </table>

由于以上的a和b循環引用彼此,結果對象無法轉換成 JSON。

如何修復錯誤:移除任何想轉換成 JSON 的對象中的循環引用。

Unexpected token ;

相關錯誤:Expected ), missing ) after argument list

JavaScript 解釋器預期的東西沒有被包含。不匹配的圓括號或方括號通常引起這個錯誤。

錯誤信息可能有所不同 - “Unexpected token ]” 或者 “Expected {” 等。

如何修復錯誤:有時錯誤出現的行號并不準確,因此很難修復。

  • [ ] { } ( ) 這幾個符號不配對常常導致出錯。檢查所有的圓括號和方括號是否配對。行號指出的不僅是問題字符。
  • Unexpected / 跟正則表達式有關。此時行號通常是正確的。
  • Unexpected ; 對象或者數組字面量里面有個 ; 通常引起這個錯誤,或者函數調用的參數列表里有個分號。此時的行號通常也是正確的。
  • </ul>

    Uncaught SyntaxError: Unexpected token ILLEGAL

    相關錯誤:Unterminated String Literal, Invalid Line Terminator

    一個字符串字面量少了結尾的引號。

    如何修復錯誤:確保所有的字符串都有結束的引號。

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

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

    嘗試讀取null或者undefined,把它當成了對象。例如:

1
2
3
4
var a = { }; var b = { a: a };
a.b = b; JSON.stringify(a);

</tr> </tbody> </table>

如何修復錯誤:通常由于拼寫錯誤導致。檢查錯誤指出的行號附近使用的變量名是否正確。

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

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

嘗試寫入 null 或者 undefined ,把它當成了一個對象。例如:

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

</tr> </tbody> </table>

如何修復錯誤:也是由于拼寫錯誤所致。檢查錯誤指出的行號附近的變量名。

Uncaught RangeError: Maximum call stack size exceeded

相關錯誤:Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

通常由程序邏輯 bug 引起,導致函數的無限遞歸調用。

如何修復錯誤:檢查遞歸函數中可能導致無限循環 的 bug 。

Uncaught URIError: URI malformed

相關錯誤:URIError: malformed URI sequence

無效的 decodeURIComponent 調用所致。

如何修復錯誤:按照錯誤指出的行號,檢查decodeURIComponent調用,它是正確的。

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

相關錯誤:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://some/url/

錯誤肯定是使用 XMLHttpRequest 引起的。

如何修復:確保請求的 URL 是正確的,它遵循同源策略 。最好的方法是從代碼中找到錯誤信息指出的 URL 。

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

相關錯誤:InvalidStateError, DOMException code 11

代碼調用的方法在當前狀態無法調用。通常由XMLHttpRequest引起,在方法準備完畢之前調用它會引起錯誤。

1
2
var someVal = null;
someVal.foo = 1;

</tr> </tbody> </table>

這時就會出錯,因為setRequestHeader方法只能在xhr.open方法之后調用。

如何修復:查看錯誤指出的行號,確保代碼運行的時機正確,或者在它(例如 xhr.open
)之前添加了不必要的調用

結論

我看過不少無用的 JavaScript 錯誤,比如 PHP 中聲名狼藉的異常Expected T_PAAMAYIM_NEKUDOTAYIM。拋出更熟悉的錯誤才更有意義。現代瀏覽器不再拋出完全無用的錯誤,才會更有幫助。

來自:http://jinlong.github.io/2015/02/01/javascript-errors-and-how-to-fix-them/?utm_source=tuicool

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
1
2
var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');
  • sesese色