【转】JavaScript 的错误（Error）与异常（Exception）处理

超、凢脫俗 2022-05-26 05:36 221阅读 0赞

PHP很少用到错误处理，因为框架帮了大忙，所以基本上没有主动接手过PHP的错误。PHP是偏后端的动态处理语言，和用户的关系不大，所以用户不会关心是否出现了报错。但是JavaScript就非常不同了，js的错误非常明显，稍微优点网络基础的人，都会迅速打开F12查看错误，最近再做一个需要大量js的项目，大量原生js，jq框架以及其他的插件混合再一起，所以难免会出现一些莫名其妙的问题。有时候看看满满的红色报错，就会想会有哪个用户会打开看到呢？经过查找资料（犀牛书）终于找到了JavaScript错误处理的机制，以即解决方案。

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

一、JavaScript错误（Error）与异常(Exception)的区别。

这里仔细区分Error与Exception的区别。在网上查找资料，找到的大部分都是Java方面的资料，对照JS起始也可以得出js的错误与异常。

> Error(错误)表示系统级的错误和程序不必处理的异常，是java运行环境中的内部错误或者硬件问题，比如，内存资源不足等，对于这种错误，程序基本无能为力，除了退出运行外别无选择。 Exception(违例)表示需要捕捉或者需要程序进行处理的异常，它处理的是因为程序设计的瑕疵而引起的问题或者在外的输入等引起的一般性问题，是程序必须处理的。

一言以蔽之：Error是代码在编译的时候就出现了错误，代码无法编译，比如语法错误，必须修正错误后才能重新编译。代码无法跳过错误。

Exception是代码再运行的时候，出现了错误，比如对象中某个属性不存在，或者是数据类型不对。代码可以继续执行，不过会在控制台中输出一段错误，提醒程序员。

那我们所讲的错误处理，基本上指的是第二种Exception的情况，用try catch 或者onerror来进行捕获。

二、 JavaScript错误是怎么输出到控制台的    ——    JavaScript的错误处理原理。

当抛出异常时，JavaScript解释器会立即停下当前正在执行的逻辑，并且跳到最近的异常处理程序（可以参考冒泡与变量作用域的相关概念。一句话简单理解：儿子犯了错误，找老子，一层一层往上找，直到找到能够承担错误的对象为止）。如果在所有的词法结构和调用栈上面没有找到错误处理程序。JavaScript就会把异常当做程序错误处理，并报告给用户。

三、使用  try catch  finally 处理程序

语法如下

![复制代码][copycode.gif]

try{
        //这里放置可能会出错的代码
    }
    catch(e)
    {
        //代码出错后执行这里。
    }
    finally
    {
        //不管代码是否报错，都将执行这里。
    }

![复制代码][copycode.gif]

三 、使用 window.onerror

![复制代码][copycode.gif]

window.onerror    =   dieError;
    function dieError(msg,url,line){
        var txt   =   "ERROR: "+msg+"\n";
            txt  +=   "URL: "+url+"\n";
            txt  +=   "LINE: "+line+"\n";
            alert(txt);
            return true;
    }

![复制代码][copycode.gif]

个人感觉这个Window.onerror 用处不大，可能是因为出现较为早的原因吧，已经有了更好的处理方法替代。

来源：https://www.cnblogs.com/roverliang/p/5070522.html

### 您可能感兴趣的 ###

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]  
    
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]  
    
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]  
    
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]

[copycode.gif]: /images/20220526/05a11ba85b804ae3a8bfc21623620894.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/