JS错误的诊断与修复

桃扇骨 2022-08-06 13:19 354阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

原文：[JavaScript Errors and How to Fix Them][JavaScript Errors and How to Fix_Them]

翻译：前端开发whqet， 意译为主，不当之处敬请指正。

作者简介：J[ani Hartikainen，][ani Hartikainen]拥有十数年的网页应用开发经验，曾经为nokia和低调神秘的[startups][]。(一个创业孵化公司)除了编程和玩游戏，他经常在自己的站点书写JS和高质量的代码。

译者的话，Javascript的调试仍然是大多人的噩梦，有什么妙招吗，看看老外大牛如何说……

\---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

华丽的分隔线之后，言归正传！

\---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Javascript确实是调试者的噩梦，很难理解错误，给出的行号也往往无用，那么有没有一个常见错误诊断和修复列表呢？马上来，请接着看！

下面是我总结的JS奇怪错误列表，鉴于不同浏览器相同错误的错误提示不同，我们给出了一些不同的示例。

## 如何阅读错误 ##

首先，我们简要看一下错误提示的结构，以便于我们更好的理解错误，以便将来更好的应对列表未列的错误。

一个典型的错误提示貌似如此，

Uncaught TypeError: undefined is not a function

1.**Uncaught TypeError**：这个部分用处不大，ca说出现了一个catch语句没有捕捉到的错误，错误类型为TypeError（类型错误）。

2.**undefined is not a function**：这个是错误提示部分，我们必须逐字理解（字面意思理解），例如本例它的字面意思是代码试图将一个undefined类型用作function。

其他的webkit内核的浏览器，例如Safari，提供了和Chrome相似格式的错误提示，Firefox也差不多，但是不包括第一部分。最新版本的IE也提供了更简洁的错误提示，但是（对IE来说，我们懂得），简洁未必代表更好。

现在来看看真正的错误。

## 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

错误产生：你希望调用一个函数，这个值却不是一个函数。

var foo = undefined;
    foo()

很多时候就是因为，函数名称打错了，产生错误。因为对象的不存在属性的默认值为undefined，因此会产生该错误。

var x = document.getElementByID('foo');   //getElementById方法拼写错误

其他类似错误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语句中，例如下面的案例，开发者不小心把==写成了=，而且等号左侧的东西不能被赋值，于是产生了错误。

if(doSomething() = 'somevalue')

错误修复：确保不向函数、this关键字赋值。

## Uncaught TypeError: Converting circular structure to JSON ##

相关错误：Uncaught TypeError: Converting circular structure to JSON,

TypeError: cyclic object value, Circular reference in value argument not supported

错误产生：产生了环形引用，然后再进行JSON转换（JSON.stringify）时产生错误，如下面代码所示，a和b进行了相互引用，因此不能转换为JSON。

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

错误修复：去除任何欲转换为JSON的对象中的环形引用。

## Unexpected token ; ##

相关错误： InvalidStateError，

DOMException code 11

错误产生： 在不能调用一个函数的时候调用一个函数。经常发生在使用XMLHttpRequest时，函数没有准备好时试图调用触发错误。

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

上面代码将报出一个错误，setRequestHeader函数只有在xhr.open之后才可以调用。

错误修复：找到提示的错误行，确保代码在正确的时刻运行，或者在改代码前加上必要的方法（例如上面代码的xhr.open）。

## 总结 ##

Javascript拥有最无力的错误提示，臭名昭著的phpExpected T\_PAAMAYIM\_NEKUDOTAYIM除外。如果我们能非常熟悉这些错误，将提大大高调试的效率。

你遇到最纠结的错误是什么，欢迎通过评论吐槽。

## 延伸阅读 ##

[Javascript debugging \[slightly\] beyond console.log][Javascript debugging _slightly_ beyond console.log]

[Google Chrome 调试JS简单教程][Google Chrome _JS]

[JavaScript Debug: A simple wrapper for console.lo][JavaScript Debug_ A simple wrapper for console.lo]g

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

\---------------------------------------------------------------------------------------------------------

[JavaScript Errors and How to Fix_Them]: http://davidwalsh.name/fix-javascript-errors?utm_source=javascriptweekly&utm_medium=email
[ani Hartikainen]: http://codeutopia.net/blog/h/davidwalsh/
[startups]: http://www.baidu.com/link?url=5ZYCG3VtpHKLAVFRFQ2CFNJtx6XOkIHugP-http://techcrunch.com/startups/
[same-origin policy]: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
[Javascript debugging _slightly_ beyond console.log]: http://swizec.com/blog/javascript-debugging-slightly-beyond-console-log/swizec/6633?utm_source=javascriptweekly&utm_medium=email
[Google Chrome _JS]: http://www.markdream.com/technologies/programs/chrome-google-js-debug.shtml
[JavaScript Debug_ A simple wrapper for console.lo]: http://benalman.com/projects/javascript-debug-console-log/
[whqet]: http://blog.csdn.net/whqet