JS异常简单处理

　　有时候JS某一处报错会导致整个页面JS的运行出问题，于是想的简单研究一下JS的错误处理机制。更详细的可以自己参考网站研究: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors

1.两个经常可能出现的错误

1.变量未定义

    <!--异常JS，会导致后面的不能正常运行-->
    <script type="text/javascript">
        alert(b)
        alert("这里是异常后的语句")
    </script>

界面报错:

2.语法错误

<!--2.SyntaxError (语法错误异常) 测试-->
<script>
    alert("sss"ssss"") //SyntaxError
</script>

界面报错:

2.　　针对上面两个错误进行简单处理(以第一个错误为例子)。。自己感觉JS错误机制特别像Java的异常机制

1.try...catch... 进行简单处理

    <!--try catch的使用-->
    <script type="text/javascript">
    try{
        alert(b);
        alert("这里是异常后的语句");//发生异常，所以不会执行到这里
    }catch(error){
        alert("发生异常了")
    }
    </script>

2.try..catch...finally...的使用

    <!--try catch  finally的使用-->
    <script type="text/javascript">
        try {
            alert(b);
            alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
        } catch (error) {
            debugger
            alert("发生异常了")
        } finally {
            alert("无论如何这里都会打印");
        }
    </script>

3.也可以直接try...finally...进行处理

    <!--try  finally的使用-->
    <script type="text/javascript">
    try{
        alert(b);
        alert("这里是异常后的语句");//发生异常，所以不会执行到这里
    }finally{
        alert("无论如何这里都会打印");
    }
    </script>

3.常见的错误类型

JS定义了7种错误类型，如下:

Error ‰
EvalError
RangeError ‰
ReferenceError ‰
SyntaxError ‰
TypeError ‰
URIError

说明：

Error类型是基本的错误类型，其他类型都继承自这个类型。
EvalError 类型的错误会在使用 eval()函数而发生异常时被抛出
TypeError 类型在 JavaScript 中会经常用到，在变量中保存着意外的类型时，或者在访问不存在的方法时，都会导致这种错误
一般情况，不同的错误，处理方式不一样。

例如:

    <!--try catch  finally的使用-->
    <script type="text/javascript">
        try {
            alert(b)
            alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
        } catch (err) {
            alert(err.name)//打印错误类型    ReferenceError
            alert(err.message)//打印错误消息      b is not defined
            if (err instanceof ReferenceError) {
                alert("发生引用异常了")
            } else if (err instanceof SyntaxError) {
                alert("发生语法异常了")
            } else {
                alert("发生其他异常了")
            }
        } finally {
            alert("无论如何这里都会打印");
        }
    </script>

4.巧用throw关键字抛出异常

1.抛出JS内置的错误异常类型

　　例如:

    <script type="text/javascript">
        function testerr() {
            try {
                alert(b)
                alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
            } catch (err) {
                if (err instanceof ReferenceError) {
                    throw new Error("引用异常");
                } else if (err instanceof SyntaxError) {
                    throw new Error("语法异常");
                } else {
                    throw new Error("其他异常");
                }
            } 
        }
        
        try{
            testerr();
        }catch(err){
            alert(err.message)
        }
    </script>

会弹出引用异常。

2.抛出自定义的错误异常类型

    <script type="text/javascript">
    /**
     *     自定义异常类
     * @param {Object} name    异常名称
     * @param {Object} message    异常信息
     */
        function MyError(name,message){
            this.name = name;
            this.message = message;
        }
    
        function testerr() {
            try {
                alert(b)
                alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
            } catch (err) {
                if (err instanceof ReferenceError) {
                    throw new MyError("yyyc","引用异常");
                } else if (err instanceof SyntaxError) {
                    throw new MyError("yyyc","语法异常");
                } else {
                    throw new MyError("qtyc","其他异常");
                }
            } 
        }
        
        try{
            testerr();
        }catch(err){
            alert(err.message)
            alert(err.name)
        }
        
    </script>

结果会弹出引用异常 yyyc