阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 错误处理和异常调试

      #兼容性处理、错误处理与调试

      查看报错

      所有浏览器都是按F12调出控制台;

      在console里面看错误;良好的错误机制可以让用户及时得到提醒,知道到底发生了什么事,因而不会恼羞成怒;作为开发者,我们必须理解在处理JavaScript错误的时候,都有哪些手段和工具可以利用; #一、错误的处理 1、try catch语句
      只有在不兼容的,在浏览器中发生了异常的错误,我们才可以用try catch捕获到,才能判断兼容(基本上不兼容的在执行的时候都会报错);需要运行,然后才能判断,属于撞墙式处理;A行A就上;A不行就试试B;

      function testError(){
      
          try{
              console.log("执行了try里面的代码");
              return "返回1";
          }catch (error){
              console.log("执行了catch里面的代码");
              return "返回2";
          }
      };
      var a=testError();
      console.log(a);
      //返回结果是:
      // 执行了try里面的代码;
      // 返回1;
      

      如果用try-catch-finally;

      虽然try-catch语句中是可选的,但是finally子句只要用;里面的代码都会执行;无论try和catch里面是什么代码都阻止不了执行finally里面的代码;即时是用了return语句;

      function testError(){
      
          try{
              console.log("执行了try里面的代码");
              return "返回的是1";
          }catch (error){
              console.log("执行了catch里面的代码");
              return "返回的是2";
          }finally{
              console.log("无论是否报错finally里的代码都执行,finally就是这么屌!");
              return "返回的是3";
          }
      };
      var a=testError();
      console.log(a);
      //返回结果是:
      // 执行了try里面的代码;
      // 无论是否报错finally里的代码都执行,finally就是这么屌!
      // 返回3;【!注意此时的return忽略了try;而是return了finally里的返回值;】
      

      正常情况是return后,函数中只要读取到return就停止执行本函数;但是在这里是特殊;

      原理分析如下

      因为函数还有一条规则是函数只能有一个返回值,当执行try的时候,遇到return,确实退出本次执行了,此时的返回值也是try内的返回值,但是因为finally的机制,必须还要再执行一次,finally里面的代码,此时return被改写成了finally里的返回值;【因为函数只能有一个返回值】;所以此时返回的是3!(catch的时候思路一样)

      再测试下,把finally里面的return去掉;代码如下

      function testError(){
      
          try{
              console.log("执行了try里面的代码");
              return "返回的是1";
          }catch (error){
              console.log("执行了catch里面的代码");
              return "返回的是2";
          }finally{
              console.log("无论是否报错finally里的代码都执行,finally就是这么屌!");
          }
      };
      var a=testError();
      console.log(a);
      //返回结果是:
      // 执行了try里面的代码;
      // 无论是否报错finally里的代码都执行,finally就是这么屌!
      // 返回1;【!注意此时finally里面没有返回值,所以函数的返回值又是1了;】
      

      结果果然就是返回1里面的值;如果用finally,那么catch就是可选的了;(catch或finally可以单独只出现一个;);不过IE7以及以前的版本有bug,除非有写catch子句;否则finally中的代码不会执行;解决办法是,只要写finally,就写一个catch子句,哪怕里面什么都没有;

      处理兼容性问题时,不用try-catch、用判断对象中是否有这个属性的原理

      在明知道自己代码哪些会出错,哪些不会出错;也就是最常见的处理兼容性问题时候,用try-catch语句就不合适了;处理兼容性问题可以用下面的;

      • if(document.getElementsByClassName){}

      获取document下getElementsByClassName的属性值,如果不兼容返回的值undefined,如果兼容返回的是一个function,然后我们把返回值转换成布尔类型判断真假;

      • if(“getElementsByClassName” in document){}

      直接用in来判断是不是document的一个属性,是的话返回true,不是的话返回false;判断属性,直接返回布尔值,用in来判断属性的性能最好

      • if(typeof document.getElementsByClassName===“function”){}

      认为只有这样才是兼容的

      错误的类型总结:

      利用不同的类型,可以熟悉更多的异常信息,有助于快速对错误做出恰当的处理;

      • Error;//基类型,其它错误类型都是继承自该类型的;因此,所有的错误类型共享了一组相同的属性(错误对象中的方法全是默认的对象方法),Error类型的报错很少见;这个基类型的主要目的是供开发者抛出自定义错误的
      • Eval错误 ,EvalError;//会在使用eval()函数而发生异常时被抛出;ECMA-262中对这个错误描述是”如果以非直接调用的方式使用eval属性的值;或者为eval属性赋值”,简单的说就是没有把eval当函数调用,就会抛出错误;但是实际中,浏览器不一定抛出的是EvalError,谷歌抛出的可能是TypeError或者ReferenceError;
      • new eval();//Uncaught TypeError: function eval() { [native code] } is not a constructor
      • eval=zhuanbang;//Uncaught ReferenceError: zhuanbang is not defined
      • 范围错误 RangeError;//数值超过相应范围时触发;
      • var a=new Array(-10);//Uncaught RangeError: Invalid array length
      • 变量引用错误) ReferenceError;找不到对象的时候,会报这个错误,通常,在访问不存在的变量时,就会发生这种错误;
      • var a=luanxie;//Uncaught ReferenceError: luanxie is not defined
      • 语法错误 SyntaxError;表示函数出现语法错误,当我们把语法错误的JavaScript字符串传入eval函数时,就会导致此类型错误;
      • eval(“a++b”);//Uncaught SyntaxError: Unexpected identifier
      • 变量类型不符 TypeError;当变量保存意外类型,或者访问不存在的方法时,都会导致这个错误;抛这个类型是由于在执行特定于类型的操作时,变量类型并不符合要求;(一般存在于传递给函数的参数实现未经过检查,结果传入类型与预期类型不相符)
      • var o=new 10;//Uncaught TypeError: 10 is not a function
      • alert(“string” in true )//Uncaught TypeError: Cannot use ‘in’ operator to search for ‘string’ in true
      • Function.prototype.toString.call(“string”);//Uncaught TypeError:Function.prototype.toString is not generic
      • URIError;在使用encodeURI()或decodeURI(),而URI不正确的时候,就会导致这个错误,这个错误很少见,因为这两个函数的容错性非常高;

      错误类型的处理,可以在try-catch语句的catch语句中使用instanceof操作符;

      try{
      
          someFunction();
      }catch (error) {
          if (error instanceof TypeError){
              //处理类型错误;
          }else if (error instanceof ReferenceError){
              //处理变量引用错误;
          }else{
              //处理其它错误;
          }
      }
      

      try-catch的合理用处

      使用与我们无法控制的错误,假设在使用一个大型JavaScript库中的函数,这个该函可能会有意无意的抛出一些错误;由于不能修改这个库的源代码,所以大可对该代码的调用放在try-catch语句当中,万一有什么错误发生,可以恰当的处理;

      一般来说,应用程序架构的较低层次中经常会抛出错误,但这个层次并不会影响当前执行的代码;因而错误通常得不到真正的处理,如果打算编写一个要在很多应用程序中使用的JavaScript库,甚至只编写一个可能会在应用程序内部多个地方使用的辅助函数,建议在抛出错误是提供详尽的信息;然后,即可在应用程序中捕获并适当地处理这些错误;

      捕获错误与抛出错误:只应该捕获哪些确切知道该如何处理的错误!捕获错误的目的在于避免浏览器以默认方式处理它们,而抛出错误的目的在于提供错误发生具体原因的消息!

      2、抛出错误

      抛出错误的目的在于提供错误发生具体原因的消息;

      与try-catch相配的还有一个throw操作符;用于随时抛出自定义错误;抛出错误的时候必须要给throw操作符一个值,这个值是什么类型,没有要求;下面代码都是可以的;

      throw  12345;//Uncaught 12345
      
      throw  "this is a string";
      throw  true;
      throw {name :"javascript"};//Uncaught #<Object>
      

      使用某种内置错误类型,可以更真实的模拟浏览器错误,每种错误类型的构造函数接收参数,就是实际的错误消息;浏览器会一常规方式报告这个错误;自定义错误时候;

      最常用的是:Error通用类型、范围错误RangeError,变量引用错误ReferenceError、变量类型错误TypeError;

       throw  new Error("抛出通用错误");//Uncaught Error: 抛出通用错误
      
      throw  new Error(抛出通用错误);//Uncaught ReferenceError,抛出通用错误 is not defined;
      throw new SyntaxError("SyntaxError语法错误");
      throw new RangeError("RangeError范围错误");
      throw new ReferenceError("ReferenceError变量引用错误");
      throw new TypeError("TypeError变量类型错误");
      

      抛出错误的时机

      下面的参数在参数不是数组的情况下会失败?

      function test(ary){
      
          ary.sort();//如果执行这个函数时候,给它一个字符串参数,那么对sort的调用就会失败;
          for(var i= 0,len=ary.length;i<len;i++){
              var ary1=[];
              if(ary[i]>100){
                  return ary1;
              }
              ary1.push(ary[i]);
              return ary1;
          }
      }
      

      这种情况下,带有适当信息的自定义错误能够显著提升代码的可维护型;

      function testName(ary){
      
          if(!(ary instanceof Array){
              throw new Error("testName():arguments must array");//手动抛出错误信息介绍,调用这个函数的时候,如果错了,一下就知道问题了
          }
          ary.sort();
          for(var i= 0,len=ary.length;i<len;i++){
              var ary1=[];
              if(ary[i]>100){
                  return ary1;
              }
              ary1.push(ary[i]);
              return ary1;
          }
      }
      

      做复杂的JS基础库的时候,一定要考虑异常处理;正确的错误处理机制应该可以确保代码中只发生你自己抛出的错误!

      错误事件

      任何没有通过try-catch处理的错误都会触发window对象的error实现;这个事件是WEB浏览器最左支持的事件之一;IE,FF,chrome为了保持向后兼容,并没有对这个事件做任何修改;但是欧朋,safari不支持error事件;

      任何浏览器中,onerror事件处理程序都不会创建event对象;但它可以接受三个参数:错误消息、错误所在的URL和行号;

      • 错误消息给出了错误的具体信息是最重要的;
      • URL只给出了文档位置;
      • 而行号所指的代码行既可能出自嵌入的JavaScript代码;也可能来自外部的文件;

      要指定onerror事件处理程序;必须使用如下所示的DOM0技术,它没有遵循"DOM2级事件"的标准格式;

      window.onerror=function(message,url,line){
      
          alert(message);
      };
      //只要是浏览器生成的,都会触发error事件,并执行这个事件处理程序,然后,浏览器默认的机制发挥作用,像往常一样显示出错误消息;
      //像下面这样在事件处理程序中返回false,可以阻止浏览器报告错误的默认行为;
      window.onerror=function(message,url,line){
          alert(message);
          return false;//通过返回false,这个函数实际上就充当了整个文档中的try-catch语句,可以捕获所有无代码处理的运行时错误;这个事件处理程序,是报告浏览器报告错误的最后一道防线;理想情况下,只要可能就不应该使用它,只要能够适当地使用try-catch语句,就不会有错误交给浏览器,也就不会触发error事件;
      

      图像也支持error事件;只要图像src特性中的URL不能返回可以被识别的图像格式,就会触发error事件;此时的error事件遵循DOM格式;会返回一个以图片为目标的evern对象;下面是一个例子;

      var image=new Image();
      
      EventUtil.addHandler(image,"load",function(event){
          alert("图片下载")
      });
      EventUtil.addHandler(image,"error",function(event){
          alert("图片没有下载")
      });
      image.src="smilex.gif";//指定不存在的文件;
      //加载图片失败的时候,会显示一个警告框;需要注意的是,发生error事件时,图像下载过程已结束;
      目录
      本文目录
      目录