javascript错误处理与调试

    本文主要介绍javascript中一些常见的错误,以及一些用于调试和处理错误的基础,以帮助我们提高javascript代码的质量.

 

先说下javascript中常见的7种错误:

 

1.变量未定义

下面的语句将隐式的创建一个新的变量abc,并将值123赋给该变量:

<span style="font-size:24px;">abc = 123;</span>

严格的讲,应该显式的定义该变量:

<span style="font-size:24px;">var abc = 123;</span>

(实际上,是否使用var关键字与变量的作用域有关,因此最好在定义变量时都加上var关键字)

但是,如果使用一个未定义的变量,将产生错误.例如,如果变量abc事先没有显式或隐式的定义,下面语句将产生错误:

<span style="font-size:24px;">alert(abc);</span>

2.大小写敏感

大小写错误是最常见的错误之一,但有时是很难发现的.例如,找出下面语句的三处错误:

<span style="font-size:24px;">var myName ="Paul";
If(myName=="paul") {
    alert(myName.toUppercase());
}<span style="font-family: 宋体; background-color: rgb(255, 255, 255);"> </span></span>

3.不匹配的大括号

4.不匹配的小括号

(上面两个错误类似的,当语句过长时就会发生,当然这些也是很容易发现的.)

 

5.连接字符串时缺少加号(+)

这种错误当语句短时发现很容易,但是长了就会非常麻烦,而且不同的浏览器报错提醒是不一样的.对于IE浏览器,提示"Error:Expected(缺少对象)",而对Firefox浏览器,则提示"Missing;before statement(在下列语句中缺少;号)".

 

6.赋值而不是相等

看下面的代码:

var myNumber = 99;
if (myNumber=101) {
    alert("myNumber is 101");
}
else {
    alert("myNumber is"+myNumber);
}

看完上述代码,你是不是想else的字句中的alert()方法将会执行,并提示我们"myNumber is 99"?但事实并非如此.if语句判断中错误的将两个等号(==)写成了一个(=),将比较运算符(==)写成了赋值运算符(=).这是一个非常典型的错误.javascript和vb不同,对于vb,赋值操作和比较运算都是一个等号.这个错误不会产生错误信息,从而非常容易被忽视.我们要记住的是,当程序的逻辑出现混乱和异常时,可以检查下是不是这里出了问题.

补充:

//相等和全等
alert(1 =='1');                        //true，相等对的是值，类型不用比较
alert(1 ==='1');                        //false，全等还需要比较类型
 
alert(1 ==true);                //true，1会隐式转换为布尔值,true== true
alert(1 ===true);                //false，1本身是数值，true本身是布尔值

PS：在类型不相等的情况下，建议使用全等 ===

 

 

7.将方法误认为属性,或者将属性误认为方法

这里常犯的就是在使用方法时忘记在方法名后带一对圆括号,或者在使用属性时,在属性名后带上多余的圆括号.例如,下面的代码:

var nowDate = new Date;
alert(nowDate.getDay);

第一行中,使用了Date对象的构造函数,该构造函数式Date对象的一个简单方法,但是,方法名后却没有一对圆括号;第二行中,调用了Date对象的getDay()方法,却忘记一

对圆括号.

正确代码如下:

var nowDate = new Date();
alert(nowDate.getDay());

错误处理

1.try...catch语句

try...catch语句总是成对出现的

try-catch的意义

1.可以通过修改代码来排错的，不需要使用try-catch

2.浏览器兼容性问题，可以通过判断浏览器或者判断是否支持某个属性或方法来判断，不需要try-catch

 

比如，无法修改代码的情况下，可能会发生错误，这个时候用try-catch，网络中断了

 

try {
alert(innerWidth);                        //W3C
}catch (e) {
alert(document.documentElement.clientWidth);                        //IE
}

PS：这样的确能实现兼容性问题，但逻辑上是不正确的.因为innerWidth不支持的浏览器，可能不一定是IE.

 

//抛出错误，说明我们自己无法解决，就需要把错误报出

 

try {
new10;
} catch (e) {
if (einstanceof TypeError) {
thrownew TypeError('类型错误：实例化new的时候，可能产生了错误！');
} else{
//alert(e);                        //这种行为叫做处理错误，浏览器不抱错了，因为处理掉了，屏蔽了错误显示
thrownew Error('未知错误！');
}
}
 
new10;                        //浏览器自己抛出了错误
 
addEvent(window, 'error',function () {
alert('程序发生错误了！');
});
 

脚本调试器