入门前端-《JavaScript 语言入门教程-try_catch以及 Error 错误处理》

偏执的太偏执、 2022-11-11 14:50 105阅读 0赞

# Error 实例对象 #

> JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。

var err = new Error('出错了');
    err.message // "出错了"

JavaScript 语言标准只提到，Error实例对象必须有message属性，表示出错时的提示信息，没有提到其他属性。大多数 JavaScript 引擎，对Error实例还提供name和stack属性，分别表示错误的名称和错误的堆栈，但它们是非标准的，不是每种实现都有。

*  message：错误提示信息
 *  name：错误名称（非标准属性）
 *  stack：错误的堆栈（非标准属性）

## SyntaxError 对象 ##

> SyntaxError对象是解析代码时发生的语法错误。

// 变量名错误
    var 1a;
    // Uncaught SyntaxError: Invalid or unexpected token
    
    // 缺少括号
    console.log 'hello');
    // Uncaught SyntaxError: Unexpected string

上面代码的错误，都是在语法解析阶段就可以发现，所以会抛出SyntaxError。第一个错误提示是“token 非法”，第二个错误提示是“字符串不符合要求”。

## ReferenceError 对象 ##

> ReferenceError对象是引用一个不存在的变量时发生的错误。

// 使用一个不存在的变量
    unknownVariable
    // Uncaught ReferenceError: unknownVariable is not defined

## RangeError 对象 ##

> RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

// 数组长度不得为负数
    new Array(-1)
    // Uncaught RangeError: Invalid array length

## TypeError 对象 ##

> TypeError对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

new 123
    // Uncaught TypeError: number is not a func
    
    var obj = { };
    obj.unknownMethod()
    // Uncaught TypeError: obj.unknownMethod is not a function

## URIError 对象 ##

> URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

decodeURI('%2')
    // URIError: URI malformed

# 自定义错误 #

除了 JavaScript 原生提供的七种错误对象，还可以定义自己的错误对象。

function UserError(message) { 
      this.message = message || '默认信息';
      this.name = 'UserError';
    }
    
    UserError.prototype = new Error();
    UserError.prototype.constructor = UserError;

上面代码自定义一个错误对象UserError，让它继承Error对象。然后，就可以生成这种自定义类型的错误了。

new UserError('这是自定义的错误！');

# throw 语句 #

throw语句的作用是手动中断程序执行，抛出一个错误。

if (x <= 0) { 
      throw new Error('x 必须为正数');
    }
    // Uncaught ReferenceError: x is not defined

throw也可以抛出自定义错误。

function UserError(message) { 
      this.message = message || '默认信息';
      this.name = 'UserError';
    }
    
    throw new UserError('出错了！');
    // Uncaught UserError {message: "出错了！", name: "UserError"}

实际上，throw可以抛出任何类型的值。也就是说，它的参数可以是任何值。

// 抛出一个字符串
    throw 'Error！';
    // Uncaught Error！
    
    // 抛出一个数值
    throw 42;
    // Uncaught 42
    
    // 抛出一个布尔值
    throw true;
    // Uncaught true
    
    // 抛出一个对象
    throw { 
      toString: function () { 
        return 'Error!';
      }
    };
    // Uncaught {toString: ƒ}

对于 JavaScript 引擎来说，遇到throw语句，**程序就中止了**。  
引擎会接收到throw抛出的信息，可能是一个错误实例，也可能是其他类型的值。

# try…catch 结构 #

一旦发生错误，程序就中止执行了。JavaScript 提供了try…catch结构，允许对错误进行处理，选择是否往下执行。

try { 
      throw new Error('出错了!');
    } catch (e) { 
      console.log(e.name + ": " + e.message);
      console.log(e.stack);
    }
    // Error: 出错了!
    // at <anonymous>:3:9
    // ...

# finally 代码块 #

> try…catch结构允许在最后添加一个finally代码块，表示不管是否出现错误，都必需在最后运行的语句。

下面是finally代码块用法的典型场景。

openFile();
    
    try { 
      writeFile(Data);
    } catch(e) { 
      handleError(e);
    } finally { 
      closeFile();
    }

上面代码首先打开一个文件，然后在`try`代码块中写入文件，如果没有发生错误，则运行`finally`代码块关闭文件；一旦发生错误，则先使用`catch` 代码块处理错误，再使用 `finally` 代码块关闭文件。

## finally 和 return 执行顺序 ##

## 清空工作空间的代码放在finally里面还是放在try…catch之后效果好? ##

第一个代码片段，使用 finally 在 try…catch 之后执行代码：

try { 
      work work
    } catch (e) { 
      handle errors
    } finally { 
      cleanup the working space
    }

第二个代码片段，将清空工作空间的代码放在了 try…catch 之后：

try { 
      work work
    } catch (e) { 
      handle errors
    }
    
    cleanup the working space

使用 `finally` 保证了 `cleanup`肯定在`try`之后被执行。如果我们只是将代码放在`try...catch` 的末尾，则在这些情况下它不会运行。