微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

如何修复那些奇怪的 JavaScript 错误

2015-07-24 20:06 前端大全

(点击上方,可快速关注)


作者:bubkoo的博客

网址:http://bubkoo.com/2015/01/25/Strange-JavaScript-Errors-and-How-to-Fix-Them/

点击“阅读原文”可查看本文网页版


调试 JavaScript 也许是一场噩梦:一些错误非常难理解,并且给出的错误行号并不是总是很有帮助。如果有一个列表,列举这些错误的意思和如何修复它们,将对我们非常有帮助。


本文列举了 JavaScript 中一些奇怪的错误。对于相同的错误不同的浏览器可能给出不同的提示,所以分别给出了不同的例子。


如何阅读错误


进入正题之前,我们先快速分析一下错误消息的结构,这对我们理解错误消息非常有用,同时也将有助于你理解那些没有在本文中列举的错误。


Chrome 中一个典型的错误看起来像这样:


Uncaught TypeError: undefined is not a function


该错误的结构如下:


  1. Uncaught TypeError: 该部分并不是很有用。Uncaught 表示该错误没有被 catch 语句捕获,TypeError 是错误名。

  2. undefined is not a function: 是消息体,需要从字面上理解。例如本例中,它的字面意思是,代码尝试将 undefined 当作函数使用。


其他基于 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


尝试将一个值(value)当作函数使用,但该值并不是一个函数。例如:


var foo = undefined;

foo();


这个错误很常见,当调用对象中的一个方法,但写错了方法名:


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


访问对象中不存在的属性时将返回 undefined,上面代码就将出现该错误。


其他类似的错误,比如“number is not a function”发生在尝试将一个 Number 当作函数使用时。


如何修复:确保函数名正确。对于该错误,行号通常准确地指向了错误发生的位置。


Uncaught ReferenceError: Invalid left-hand side in assignment


同类错误:


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

  • Uncaught exception: ReferenceError: Cannot assign to ‘this’


当尝试给一个不能被赋值的变量赋值时将发生该错误。看下面的典型例子:


if(doSomething() = 'somevalue')


在上面例子中,开发人员不小心将 == 写成了 =,错误消息“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 序列化一个存在循环引用的对象时。


var a = { };

var b = { a: a };

a.b = b;

JSON.stringify(a);


由于上面 a 和 b 两个对象都彼此相互引用,结果导致对象不能被转换为 JSON 字符串。


如何修复:移除将要被转换为 JSON 字符串对象内部的循环引用。


Unexpected token ;


同类错误:


  • Expected )

  • missing ) after argument list


通常发生在缺少括号或分号时。


该错误中所谓的符号(token)可以多种多样,如“Unexpected token ]”或“Expected {”等等。


如何修复:该错误提示的行号有时并不能指向正确的位置,这增加了修复难度。


错误信息中包含“[ ] { } ( )”时,通常是因为缺少配对的部分,检查所有括号,保证都是配对的。这种情况下,行号通常指向了其他位置,问不是错误的位置。

异常的 / 和正则表达式有关,行号指向了正确的位置。

异常的 ; 通常发生在对象、数组或函数调用时参数列表内部包含 ;,行号也指向了正确的位置。


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 作为一个对象使用,例如:


var someVal = null;

console.log(someVal.foo);


如何修复:通常是由于书写失误导致,确保错误提示的行号附近的变量都是书写正确的。


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 的对象的属性赋值。


var someVal = null;

someVal.foo = 1;


如何修复:这也通常是由于书写错误导致,检查错误提示的行号附近的变量名是否正确。


Uncaught RangeError: Maximum call stack size exceeded


同类错误:


  • Uncaught exception: RangeError: Maximum recursion depth exceeded

  • too much recursion

  • Stack overflow


通常是由程序逻辑问题,导致了无限递归的函数调用。


如何修复:检查函数的递归调用,确保函数不是无限递归的。


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 满足同源策略。


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


同类错误:


  • InvalidStateError

  • DOMException code 11


该错误表示调用对象的方法时,对象的状态不对。在使用 XMLHttpRequest 时,在其准备好之前尝试调用其中的方法将导致该错误。


var xhr = new XMLHttpRequest();

xhr.setRequestHeader('Some-Header', 'val');


上例中将导致错误,因为 setRequestHeader 方法只能在 xhr.open 之后调用。


如何修复:检查行号指示的位置,确保代码运行在合适的时间,或在这之前添加必要的函数调用(比如xhr.open)。



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 python获取Ip归属信息 编写高性能的 Swift 代码 Android中的Drawable资源详解 教程 | 从零开始学信息图 马云香港演讲-给创业者提供更多动力了!!