【javascript】错误处理和调试

1、错误处理

• 任何有影响力的Web应用程序都需要一套完善的错误处理机制，良好的错误处理机制可以让用户及时得到提醒。

1.1 try-catch语句

try{
    // 可能会导致错误的代码
} catch(error){
    // 在错误发生时怎么处理
}

(1)finally 子句

• 虽然在try-catch 语句中是可选的，但finally子句一经使用，其代码无论如何都会执行。
• 只要代码中包含finally子句，则无论try或catch语句块中包含什么代码——甚至return 语句，都不会阻止finally 子句的执行

function testFinally(){
    try {
        return 2;
    } catch (error){
        return 1;
    } finally {
        return 0;
    }
}
/**调用这个函数只能返回0**/

(2)错误类型

• 执行代码期间可能会发生的错误有多种类型。每种错误都有对应的错误类型，而当错误发生时，就会抛出相应类型的错误对象。

  • Error
  • EvalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

• EvalError 类型的错误会在使用eval()函数而发生异常时被抛出。

new eval(); //抛出EvalError
eval = foo; //抛出EvalError

• RangeError 类型的错误会在数值超出相应范围时触发。

var items1 = new Array(-20); //抛出RangeError
var items2 = new Array(Number.MAX_VALUE); //抛出RangeError

• 在找不到对象的情况下，会发生ReferenceError。

var obj = x; //在x 并未声明的情况下抛出 ReferenceError

• 当我们把语法错误的JavaScript字符串传入eval()函数时，就会导致此SyntaxError。

eval("a ++ b"); //抛出SyntaxError

• 在执行特定于类型的操作时，变量的类型不符合要求,会导致TypeError。

var o = new 10; //抛出TypeError
alert("name" in true); //抛出TypeError
Function.prototype.toString.call("name"); //抛出TypeError

• 在使用encodeURI()或decodeURI()，而URI 格式不正确时，就会导致URIError 错误。

• 利用不同的错误类型，可以获悉更多有关异常的信息，从而有助于对错误作出恰当的处理。

try {
    someFunction();
} catch (error){
    if (error instanceof TypeError){
        //处理类型错误
    } else if (error instanceof ReferenceError){
        //处理引用错误
    } else {
        //处理其他类型的错误
    }
}

(3)合理使用try-catch

• 使用try-catch 最适合处理那些我们无法控制的错误。假设你在使用一个大型JavaScript 库中的函数，该函数可能会有意无意地抛出一些错误。由于我们不能修改这个库的源代码，所以大可将对该函数的调用放在try-catch语句当中，万一有什么错误发生，也好恰当地处理它们。
• 在明明白白地知道自己的代码会发生错误时，再使用try-catch 语句就不太合适了。
  
  

1.2 抛出错误

• 与try-catch 语句相配的还有一个throw 操作符，用于随时抛出自定义错误。

• 抛出错误时，必须要给throw 操作符指定一个值，这个值是什么类型，没有要求。

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

• 利用原型链还可以通过继承Error 来创建自定义错误类型。

function CustomError(message){
    this.name = "CustomError";
    this.message = message;
}
CustomError.prototype = new Error();
throw new CustomError("My message");

(1)抛出错误的时机

• 要针对函数为什么会执行失败给出更多信息，抛出自定义错误是一种很方便的方式。

function process(values){
    if (!(values instanceof Array)){
        throw new Error("process(): Argument must be an array.");
    }
    values.sort();
    for (var i=0, len=values.length; i < len; i++){
        if (values[i] > 100){
            return values[i];
        }
    }
    return -1;
}

(2) 抛出错误与使用try-catch

• 如果你打算编写一个要在很多应用程序中使用的JavaScript库，甚至只编写一个可能会在应用程序内部多个地方使用的辅助函数，我都强烈建议你在抛出错误时提供详尽的信息。然后，即可在应用程序中捕获并适当地处理这些错误。

• 捕获那些确切地知道该如何处理的错误。捕获错误的目的在于避免浏览器以默认方式处理它们；而抛出错误的目的在于提供错误发生具体原因的消息。

1.3 错误事件

• 在任何Web 浏览器中，onerror事件处理程序都不会创建event对象，但它可以接收三个参数：错误消息、错误所在的URL 和行号。
• 只要发生错误，无论是不是浏览器生成的，都会触发error事件，并执行这个事件处理程序。

window.onerror = function(message, url, line){
    alert(message);
    //阻止浏览器报告错误的默认行为。
    return false;
};

1.4 常见的错误类型

• 由于JavaScript 是松散类型的，而且也不会验证函数的参数，因此错误只会在代码运行期间出现。一般来说，需要关注三种错误：
  • 类型转换错误
  • 数据类型错误
  • 通信错误

(1)类型转换错误

• 建议使用全等（===）和不全等（!==）操作符，以避免类型转换。
• 容易发生类型转换错误的另一个地方，就是流控制语句。像if之类的语句在确定下一步操作之前，会自动把任何值转换成布尔值。尤其是if语句，如果使用不当，最容易出错。

function concat(str1, str2, str3){
    var result = str1 + str2;
    if (str3){ //绝对不要这样!!!
        result += str3;
    }
    return result;
}

function concat(str1, str2, str3){
    var result = str1 + str2;
    if (typeof str3 == "string"){ //恰当的比较
        result += str3;
    }
    return result;
}

(2) 数据类型错误

• 为了保证不会发生数据类型错误，只能依靠开发人员编写适当的数据类型检测代码。在将预料之外的值传递给函数的情况下，最容易发生数据类型错误。

/**例子一**/

//不安全的函数，任何非字符串值都会导致错误
function getQueryString(url){
    var pos = url.indexOf("?");
    if (pos > -1){
        return url.substring(pos +1);
    }
    return "";
}

function getQueryString(url){
    if (typeof url == "string"){ //通过检查类型确保安全
        var pos = url.indexOf("?");
        if (pos > -1){
            return url.substring(pos +1);
        }
    }
    return "";
}

/**例子二**/
//不安全的函数，任何非数组值都会导致错误
function reverseSort(values){
    if (values){ //绝对不要这样!!!
        values.sort();
        values.reverse();
    }
}

//不安全的函数，任何非数组值都会导致错误
function reverseSort(values){
    if (values != null){ //绝对不要这样!!!
        values.sort();
        values.reverse();
    }
}

//还是不安全，任何非数组值都会导致错误
function reverseSort(values){
    if (typeof values.sort == "function"){ //绝对不要这样!!!
        values.sort();
        values.reverse();
    }
}

//安全，非数组值将被忽略
function reverseSort(values){
    if (values instanceof Array){ //问题解决了
        values.sort();
        values.reverse();
    }
}

(3)通信错误

• 第一种通信错误与格式不正确的URL或发送的数据有关。最常见的问题是在将数据发送给服务器之前，没有使用encodeURIComponent()对数据进行编码。
• 对于查询字符串，应该记住必须要使用encodeURIComponent()方法。为了确保这一点，有时候可以定义一个处理查询字符串的函数。

function addQueryStringArg(url, name, value){
    if (url.indexOf("?") == -1){
        url += "?";
    } else {
        url += "&";
    }
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

1.5 区分致命错误和非致命错误

• 对于非致命错误，可以根据下列一或多个条件来确定：
  • 不影响用户的主要任务；
  • 只影响页面的一部分；
  • 可以恢复；
  • 重复相同操作可以消除错误。
• 致命错误，可以通过以下一或多个条件来确定：
  • 应用程序根本无法继续运行；
  • 错误明显影响到了用户的主要操作；
  • 会导致其他连带错误。

for (var i=0, len=mods.length; i < len; i++){
    mods[i].init(); //可能会导致致命错误
}

for (var i=0, len=mods.length; i < len; i++){
    try {
        mods[i].init();
    } catch (ex) {
        //在这里处理错误
    }
}

1.6 把错误记录到服务器

• 开发Web 应用程序过程中的一种常见的做法，就是集中保存错误日志，以便查找重要错误的原因。
• 要建立这样一种JavaScript错误记录系统，首先需要在服务器上创建一个页面用于处理错误数据。这个页面的作用无非就是从查询字符串中取得数据，然后再将数据写入错
  误日志中。
• 这个页面可能会使用如下所示的函数：

function logError(sev, msg){
    var img = new Image();
    img.src = "log.php?sev=" + encodeURIComponent(sev) + "&msg=" +
    encodeURIComponent(msg);
}

• 使用了Image 对象来发送请求，这样做非常灵活，主要表现如下几方面。
  (1)所有浏览器都支持Image 对象，包括那些不支持XMLHttpRequest 对象的浏览器。
  (2)可以避免跨域限制。通常都是一台服务器要负责处理多台服务器的错误，而这种情况下使用XMLHttpRequest 是不行的。
  (3)在记录错误的过程中出问题的概率比较低。

for (var i=0, len=mods.length; i < len; i++){
    try {
        mods[i].init();
    } catch (ex){
        logError("nonfatal", "Module init failed: " + ex.message);
    }
}

2、调试技术

(1)将消息记录到控制台

• 可以通过console 对象向JavaScript 控制台中写入消息。
  • error(message)：将错误消息记录到控制台
  • info(message)：将信息性消息记录到控制台
  • log(message)：将一般消息记录到控制台
  • warn(message)：将警告消息记录到控制台

(2)将消息记录到当前页面

• 在页面中开辟一小块区域，用以显示消息

(3)抛出错误

function divide(num1, num2){
    if (typeof num1 != "number" || typeof num2 != "number"){
        throw new Error("divide(): Both arguments must be numbers.");
    }
    return num1 / num2;
}

• 对于大型应用程序来说，自定义的错误通常都使用assert()函数抛出。这个函数接受两个参数，一个是求值结果应该为true的条件，另一个是条件为false时要抛出的错误。

//基本的assert()函数
function assert(condition, message){
    if (!condition){
        throw new Error(message);
    }
}

• 使用assert()函数可以减少抛出错误所需的代码量.

function divide(num1, num2){
    assert(typeof num1 == "number" && typeof num2 == "number",
    "divide(): Both arguments must be numbers.");
    return num1 / num2;
}

好好学习