• [译]JavaScript 错误和处理


    JavaScript的调试是一个噩梦:一些错误刚开始很难理解,并且给出的错误函数也经常是没用的。如果把错误都列出来并给出解决办法会不会很有用呢。

    下面列出了JavaScript一系列的奇怪错误。对于同样的错误,不同的浏览器会给出不同的报错信息,所以这里提供了适用于不同情况的示例。

     

    怎样阅读错误

    在列出错误之前,让我们快速看一下错误信息的结构。理解这些结构可以帮助我们更好的理解错误,同时在你遇到这里没有列出来的错误时也不会太棘手。

    一个典型的错误,来自Chrome:

    Uncaught TypeError: undefined is not a function

    这个错误的结构如下:

    1. Uncaught TypeError: 错误信息的这一部分通常没什么用。不能捕捉意味着这个错误不能被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

    这些错误都是代码试图像函数一样调用某个值,但这个值并不是函数,比如:

    var foo = undefined;
    foo();

    通常,你试图调用一个对象的方法,写错了方法名,会引起这种错误:

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

    由于属性不存在时,默认为undefined,上述代码会导致这种错误。

    如何解决这种bug:确保方法名正确。这种错误,报错的行数通常指向的是正确的地址。

     

    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')

    在这个例子中,应当使用两个或三个等号,但是使用了一个。“left-hand side in assignment”这条消息指向等号左侧,就像上述例子一样,等号左侧不能被赋值,导致这个错误。

    如何解决这种bug:确保你没有向函数执行结果或者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。

    如何解决这种bug:对于要转换为JSON的对象,避免对象的相互引用。

     

    Unexpected token ;

    相关错误:Expected ), missing ) after argument list

    JavaScript解释器期望一个东西,但是这个东西没出现,最常见是括号不匹配。

    错误中的记号可能会不尽相同:“Unexpected token ]”或者“Expected {” 等等。

    如何解决这种bug:有时候错误行数并没有指向正确的位置,给错误修复带来困难。

    • 对于[]{}()等一般是由于不匹配引起的错误,这种情况下错误行数通常指向别的地方而不是发生错误地方。
    • / 一般和正则表达式有关,这种情况行数一般指向正确位置。
    • 对于分号; 一般是由于对象或者数组内出现了分号。这种错误行号位置也是正确的。

     

    Uncaught SyntaxError: Unexpected token ILLEGAL

    相关错误:Unterminated String Literal, Invalid Line Terminator

    字面上理解,字符串缺少了匹配的引号。

    如何解决这种bug:确保字符传引号匹配。

     

    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);

    **如何解决这种bug:通常是由书写错误引起的,检查错误行数附近的变量名是否书写正确

    (译者注:作者说由书写错误引起,我感觉并不妥当,有时候对象是从别处获取的,但是为null没有检查就直接调用也会出现这种情况。)

     

    Uncaught RangeError: Maximum call stack size exceeded

    相关错误:Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

    通常是由于逻辑错误引起的,调用无线递归的函数造成的。

    如何解决这种bug:对递归函数进行检查。

     

    Uncaught URIError: URI malformed

    相关错误:URIError: malformed URI sequence

    无效的decodeURIComponent调用引起。

    如何解决这种bug: 检查错误函数附近的decodeURIComponent,获取正确的输入值。

    http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource" name="XMLHttpRequest cannot load http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource" class="anchor">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引起的。

    如何解决这种bug:保证请求地址正确,并且没有跨域。

    (译者注:Chrome下可以检查开发者工具的Network)。

     

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

    相关错误:InvalidStateError, DOMException code 11

    试图在不该调用这个方法的时候调用了该方法。通常在使用XMLHttpRequest的时候,XMLHttpRequest对象还没准备好便调用了其他方法。

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

    这种情况下,会得到上述错误,因为setRequestHeader必须在open方法之后调用。

    如何解决这种bug:检查错误行数附近的代码,确保代码再正确的时机执行,或者在之前增加必要的调用。(如xhr.open

     

    总结

    JavaScript里有一些我觉得很没用的错误信息,除了像PHP中的Expected T_PAAMAYIM_NEKUDOTAYIM,熟悉这些错误,并结合现代浏览器的帮助更好的解决bug!


    更多资源:JavaScript 异常档案

  • 相关阅读:
    Kubernetes集群部署篇
    JVM0
    RocketMQ之消费者启动与消费流程
    CSS Houdini:用浏览器引擎实现高级CSS效果
    推荐系统协同过滤在Spark中的实现
    vivo官网APP全机型UI适配方案
    工作流引擎在vivo营销自动化中的应用实践 | 引擎篇03
    idea的maven插件
    RabbitMQ 在Spring Boot上的使用
    java,jvm的oracle官方文档
  • 原文地址:https://www.cnblogs.com/zjzhome/p/4439933.html
Copyright © 2020-2023  润新知