Javascript 错误处理的几种方法

 更新时间:2009年06月13日 23:57:12   作者:  
浏览器不会抛出Error类型的exception异常,所以如果捕获到Error类型的异常,可以确定这个异常是用户代码抛出的,不是浏览器抛出的。
1.使用window.onerror指定错误处理函数。
当有错误的时候,onerror会被callback。 当某个JavaScript block中有多个script错误时,第一个错误触发后(回调callback),当前Javascript block后面的script会被自动Drop忽略掉,不被执行。
如: 
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
window.onerror = function(message, url, line)
{
alert("Error.\nMessage:"+ message +"\nUrl:" + url + "\nLine:" + line)
return true;
}
</script>
</head>
<body>
<script type="text/javascript">
test();
test();
test();
test();
</script>
<script type="text/javascript">
test();
test();
test();
test();
</script>
</body>
</html>

在上面的例子中只会有每一个block中的第一个test();产生error。触发window.onerror回调,后面的Javascript会被忽略掉。img 也支持 onerror < img src="pic.gif" onerror = "javascript:alert("An error occurred.");"/>。onerror 是浏览器支持的对象。由浏览器决定是否可以使用,不是DOM标准。

2.使用Javascript中的try catch throw处理异常。
Javascript支持了try catch throw,Javascript中定义的异常:
(1)EvalError: An error occurs in the eval() function.
(2)RangeError: A number value is greater then or less then the number that can be represented in Javascript(Number.MAX_VALUE and Number.MIN_VAKUE).
(3)ReferenceError: An illegal reference is used.
(4)SyntaxError: A syntax error occus inside of an eval() function call. All other syntax error are reorted by the browser and cannot be handled with a try...catch statement.
(5)TypeError. A variables type is unexpected. 6.URIError. An error ocuurs in the encodeURI() or the decodeURI() function.
如:
复制代码 代码如下:

<script type="text/javascript">
function CreateError()
{
throw new Error("Created error by custom.");
}
try
{
//throw a error from a function just want to see the call stack in firefox.
CreateError();
}
catch(error)
{
var errorMsg = ("Message: " + error.message + "\n");
if(typeof(error.stack)!=undefined)
{
//FF
errorMsg += ("Line Number: " + error.lineNumber + "\n");
errorMsg += ("File Name: " + error.fileName + "\n");
errorMsg += ("Stack Trace:\n" + error.stack + "\n");
}
else
{
//IE
errorMsg += ("Description: " + error.description + "\n");
errorMsg += ("Number: " + error.number + "\n");
}
alert(errorMsg);
}
finally
{
//alert("End try catch.message from finally block.");
}
</script>


Error.message是IE和FireFox都支持的属性。
IE支持description 和 number属性。
FF支持fileName lineNumber 和 stack 属性。
由于Javascript是弱类型的语言。
所以在catch部分只能catch一次,不能像C#这样的语言可以写多个catch,catch不同类型的exception。
但是可以用 instanceof ErrorType的方式实现类似的功能。
如:
复制代码 代码如下:

<script type="text/javascript">
try
{ //Syntax Error
//eval("alert a");

//Custom Error
throw new Error("An error occured.");
}
catch(error)
{
if(error instanceof SyntaxError)
{
alert("Syntax Error");
}
else if(error instanceof EvalError)
{
alert("Eval Error");
}
else if(error instanceof RangeError)
{
alert("Range Error");
}
else if(error instanceof ReferenceError)
{
alert("Reference Error");
}
else if(error instanceof TypeError)
{
alert("Type Error");
}
else if(error instanceof Error)
{
alert("Custon Error");
}
alert(error.message);
}
</script>


注:浏览器不会抛出Error类型的exception异常,所以如果捕获到Error类型的异常,可以确定这个异常是用户代码抛出的,不是浏览器抛出的。
Javascript的assert()
复制代码 代码如下:

function assert(bCondition, sErrorMsg) {
   if (!bCondition) {
      alert(sErrorMsg);
      throw new Error(sErrorMsg);
   }
}

相关文章

  • 弹出窗口并且此窗口带有半透明的遮罩层效果

    弹出窗口并且此窗口带有半透明的遮罩层效果

    这篇文章主要介绍了如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,需要的朋友可以参考下
    2014-03-03
  • 兼容IE和FF的图片上传前预览js代码

    兼容IE和FF的图片上传前预览js代码

    上传前预览使用js实现还是比较cool的,同时还可以兼容IE和FF的能做到这一点已经相当不容易了,下面与大家一起分享下具体的实现,感兴趣的你可不要错过了哈
    2013-05-05
  • Webpack提取页面公共资源的实现

    Webpack提取页面公共资源的实现

    本文主要介绍了Webpack提取页面公共资源的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • FF下zoom的替代方案 单位em

    FF下zoom的替代方案 单位em

    css 属性zoom是ie私有属性 在FF中(或者说仅实现CSS标准的其他浏览器中)无法使用,一直在网上搜索它的替代方案,但没有收获,后来听群里有朋友说em或可解决此问题,经过研究和测试,发现果然可以解决。
    2008-08-08
  • 微信小程序登录对接Django后端实现JWT方式验证登录详解

    微信小程序登录对接Django后端实现JWT方式验证登录详解

    这篇文章主要介绍了微信小程序登录对接Django后端实现JWT方式验证登录详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • javascript对象的多种合并方式详解

    javascript对象的多种合并方式详解

    这篇文章主要介绍了JavaScript中的多种对象合并方法,通过代码的形式给大家介绍的非常详细,需要的朋友可以参考下,希望能够给你带来帮助
    2021-08-08
  • es6中some和every方法使用简单示例

    es6中some和every方法使用简单示例

    JavaScript在ES6版本后提供了一些更加便捷的方法供开发者使用,实现原理其实是在对应的构造函数原型提供方法,下面这篇文章主要给大家介绍了关于es6中some和every方法使用的相关资料,需要的朋友可以参考下
    2023-04-04
  • javascript数组中的concat方法和splice方法

    javascript数组中的concat方法和splice方法

    这篇文章主要介绍了javascript数组中的concat方法和splice方法,concat方法作用合并数组,可以合并一个或多个数组,会返回合并数组之后的数据,不会改变原来的数组,更多相关内容需要的小伙伴可以参考下面文章内容
    2022-03-03
  • TypeScript之元组、数组及as const的使用

    TypeScript之元组、数组及as const的使用

    TypeScript中的元组、数组和as const关键字对于类型安全性和代码可读性非常重要,本文主要介绍了TypeScript之元组、数组及as const的使用,感兴趣的可以了解一下
    2023-10-10
  • 微信小程序的开发范式BeautyWe.js入门详解

    微信小程序的开发范式BeautyWe.js入门详解

    这篇文章主要介绍了微信小程序的开发范式BeautyWe.js详解,它是一套专注于微信小程序的企业级开发范式,它的愿景是:让企业级的微信小程序项目中的代码,更加简单、漂亮,需要的朋友可以参考下
    2019-07-07

最新评论