js 错误处理与调试

目录

一、错误类型

二、处理错误的方式

1、try-catch-finally 语句

2、throw 操作符

3、error 事件

4、log 到控制台

5、assert() 函数抛出错误


一、错误类型

  • Error:是基类,其他错误类型都继承自该类型;供开发人员抛出自定义错误。
  • EvalError:在使用 eval() 函数而发生异常时被抛出。
  • RangeError:在数值超出相应范围时会被抛出。
  • ReferenceError:在找不到对象时会被抛出。
  • SyntaxError:在我们把语法错误的 JavaScript 字符串传入 eval() 函数时被抛出。
  • TypeError:在变量中保存着意外类型的变量时,在访问不存在的方法时都会被抛出。
  • URIError:在使用 encodeURI() 或 decodeURI() 方法而 URI 格式不正确时就会被抛出。

要想知道错误的类型,可以像下面这样在 try-catch 语句的 catch 语句中使用 instanceof 操作符:

try {
    // 正常运行的代码
} catch (error) {
    if(error instanceof TypeError){
        // 处理类型错误
    }else if(error instanceof ReferenceError){
        // 处理引用错误
    }else{
        // 处理其他类型的错误
    }
}

 

二、处理错误的方式

1、try-catch-finally 语句

try{
    // 需要检查是否会报错的代码
}catch(error){
    // 在错误发生时执行
}finally{
    // 无论是否发生错误都会执行的代码(在 try 代码执行后执行)
}

2、throw 操作符

throw 操作符用于随时抛出自定义错误。带有适当的自定义错误能够显著提升代码的可维护性。 

用 throw 操作符抛出错误时,必须要给它指定一个值,这个值可以是任何数据类型的。

throw 123456;
throw "hello";
throw true;
throw {name: "JS"}
throw new Error(" 浏览器:我说你错了就是错了");

在遇到 throw 操作符时,代码会立即停止执行。仅当有 try-catch 语句捕获到被抛出的值时,代码才会继续执行。

function myFn(x){
    try{
        if(x=="")    throw "empty";
        if(isNaN(x)) throw "not a number";
        if(x>10)     throw "too high";
        if(x<5)      throw "too low";
    }catch(err){
        console.log(err);
    }
}
myFn(66);

3、error 事件

任何没有通过 try-catch 语句处理的错误都会触发 window 对象的 error 事件。

要指定 error 事件,必须使用 DOM0 级技术,因为它没有遵循 DOM2 级事件的标准格式。

window.onerror = function(message, url, line){
    alert(message);
}

如何阻止默认的 error 事件抛出错误呢?

window.onerror = function(message, url, line){
    alert(message);
    return false;// 阻止error 事件
}

4、log 到控制台

不存在一种跨浏览器的向 JavaScript 控制台写入消息的机制,但下面的函数到可以作为统一的接口。

function log(message){
    if(typeof console == "object"){
        console.log(message);
    }else if(typeof opera == "object"){
        opera.postError(message);
    }else if(typeof java == "object" && typeof java.lang == "object"){
        java.lang,System.out.println(message);
    }
}

这个 log 函数检测了哪个控制台接口可用,然后就是用相应的接口。可以在浏览器中放心使用这个函数,比如:

function sum(num1, num2){
    log("初始值:"+num1+", "+num2);
    log("求和后的结果:"+(num1+num2));
}
sum(500, 21);

5、assert() 函数抛出错误

在大型应用中,自定义的错误通常使用 assert() 函数抛出,这个函数接收两个参数:条件(布尔值)和 不满足条件时要抛出的错误(字符串)。

function assert(condition, message){
    if(!condition){
        throw new Error(message);
    }
}

可以用 assert() 函数代替某些函数中的 if 语句:

比如:

function fn(n){
    if(n>9){
        throw new Error("值太大了");
    }
}
fn(11);

我们可以将上面的代码改写为:

function fn(n){
    assert(n<9, "值太大了");
}
fn(11);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值