JavaScript - 错误处理机制 - 错误类型与处理

àì夳堔傛蜴生んèń 2023-03-13 05:26 1阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于前端开发时， 通过查看错误类型关键字，定性分析可能的原因, 也帮助我们深入理解JS. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> key points: Error 实例对象 &nbsp; SyntaxError 对象 ReferenceError 对象 RangeError 对象 TypeError 对象 URIError 对象 EvalError 对象 &nbsp; throw&nbsp; try...catch &nbsp; 1.介绍 JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。 JavaScript 原生提供<code>Error</code>构造函数，所有抛出的错误都是这个构造函数的实例。 
 <blockquote> 
 var err = new Error('出错了'); err.message // "出错了" 
 &nbsp; 
 说明： 
 如果只是手动实例化一个错误[或者脚本解析失败等]，并不会终止程序的运行，只有抛出才可能会，之所以说可能是因为 
 抛出异常，结合try...catch处理还是可以继续运行下去，请向下查看throw与try...catch. 
 </blockquote> 2.原生错误类型 
 <table> 
 <tbody> 
 <tr> 
 <td> <code>Error</code>实例对象是最一般的错误类型，在它的基础上，JavaScript 还定义了其他6种错误对象。也就是说，存在<code>Error</code>的6个派生对象 &nbsp; 2.1 SyntaxError 对象 <code>SyntaxError</code>对象是解析代码时发生的语法错误。 
 <blockquote> 
 // 变量名错误 var 1a; // Uncaught SyntaxError: Invalid or unexpected token 
 // 缺少括号 console.log 'hello'); // Uncaught SyntaxError: Unexpected string 
 </blockquote> 上面代码的错误，都是在语法解析阶段就可以发现，所以会抛出<code>SyntaxError</code>。第一个错误提示是“token 非法”，第二个错误提示是“字符串不符合要求”。 &nbsp; 2.2 ReferenceError 对象 <code>ReferenceError</code>对象是引用一个不存在的变量时发生的错误。 
 <blockquote> 
 // 使用一个不存在的变量 unknownVariable // Uncaught ReferenceError: unknownVariable is not defined 
 </blockquote> 另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果赋值。 
 <blockquote> 
 // 等号左侧不是变量 console.log() = 1 // Uncaught ReferenceError: Invalid left-hand side in assignment 
 </blockquote> 上面代码对函数<code>console.log</code>的运行结果赋值，结果引发了<code>ReferenceError</code>错误。 &nbsp; 2.3&nbsp;RangeError 对象 <code>RangeError</code>对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是<code>Number</code>对象的方法参数超出范围，以及函数堆栈超过最大值。 
 <blockquote> 
 // 数组长度不得为负数 new Array(-1) // Uncaught RangeError: Invalid array length 
 </blockquote> 2.4 TypeError 对象 <code>TypeError</code>对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用<code>new</code>命令，就会抛出这种错误，因为<code>new</code>命令的参数应该是一个构造函数。 
 <blockquote> 
 new 123 // Uncaught TypeError: number is not a func 
 var obj = {}; obj.unknownMethod() // Uncaught TypeError: obj.unknownMethod is not a function 
 </blockquote> 上面代码的第二种情况，调用对象不存在的方法，也会抛出<code>TypeError</code>错误，因为<code>obj.unknownMethod</code>的值是<code>undefined</code>，而不是一个函数。 &nbsp; 2.5 URIError 对象 <code>URIError</code>对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及<code>encodeURI()</code>、<code>decodeURI()</code>、<code>encodeURIComponent()</code>、<code>decodeURIComponent()</code>、<code>escape()</code>和<code>unescape()</code>这六个函数。 
 <blockquote> 
 decodeURI('%2') // URIError: URI malformed 
 </blockquote> 2.6 EvalError 对象 <code>eval</code>函数没有被正确执行时，会抛出<code>EvalError</code>错误。该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留。 &nbsp; 2.7&nbsp;总结 以上这6种派生错误，连同原始的<code>Error</code>对象，都是构造函数。开发者可以使用它们，手动生成错误对象的实例。这些构造函数都接受一个参数，代表错误提示信息（message）。 
 <blockquote> 
 var err1 = new Error('出错了！'); var err2 = new RangeError('出错了，变量超出有效范围！'); var err3 = new TypeError('出错了，变量类型无效！'); 
 err1.message // "出错了！" err2.message // "出错了，变量超出有效范围！" err3.message // "出错了，变量类型无效！" 
 </blockquote> </td> 
 </tr> 
 </tbody> 
 </table>3.自定义错误 
 <table> 
 <tbody> 
 <tr> 
 <td> 除了 JavaScript 原生提供的七种错误对象，还可以定义自己的错误对象。 
 <blockquote> 
 function UserError(message) { &nbsp; this.message = message || '默认信息'; &nbsp; this.name = 'UserError'; } 
 UserError.prototype = new Error(); UserError.prototype.constructor = UserError; 
 </blockquote> 上面代码自定义一个错误对象<code>UserError</code>，让它继承<code>Error</code>对象。然后，就可以生成这种自定义类型的错误了。 
 <blockquote> 
 new UserError('这是自定义的错误！'); 
 </blockquote> </td> 
 </tr> 
 </tbody> 
 </table>4.throw 语句 <code>throw</code>语句的作用是手动中断程序执行，抛出一个错误。 
 <blockquote> 
 if (x &lt;= 0) { &nbsp; throw new Error('x 必须为正数'); } // Uncaught ReferenceError: x is not defined 
 </blockquote> 上面代码中，如果变量<code>x</code>小于等于<code>0</code>，就手动抛出一个错误，告诉用户<code>x</code>的值不正确，整个程序就会在这里中断执行。 可以看到，<code>throw</code>抛出的错误就是它的参数，这里是一个<code>Error</code>实例。 <code>throw</code>也可以抛出自定义错误。 
 <blockquote> 
 function UserError(message) { &nbsp; this.message = message || '默认信息'; &nbsp; this.name = 'UserError'; } 
 throw new UserError('出错了！'); // Uncaught UserError {message: "出错了！", name: "UserError"} 
 </blockquote> 上面代码中，<code>throw</code>抛出的是一个<code>UserError</code>实例。 实际上，<code>throw</code>可以抛出任何类型的值。也就是说，它的参数可以是任何值 
 <blockquote> 
 // 抛出一个字符串 throw 'Error！'; // Uncaught Error！ 
 // 抛出一个数值 throw 42; // Uncaught 42 
 // 抛出一个布尔值 throw true; // Uncaught true 
 // 抛出一个对象 throw { &nbsp; toString: function () { &nbsp; &nbsp; return 'Error!'; &nbsp; } }; // Uncaught {toString: ƒ} 
 </blockquote> 对于 JavaScript 引擎来说，遇到<code>throw</code>语句，程序就中止了。 引擎会接收到<code>throw</code>抛出的信息，可能是一个错误实例，也可能是其他类型的值。 &nbsp; &nbsp; 5.try...catch 结构 一旦发生错误，程序就中止执行了。 JavaScript 提供了<code>try...catch</code>结构，允许对错误进行处理，选择是否往下执行。//这就是给我们程序员可以控制的权利 
 <blockquote> 
 try { &nbsp; throw new Error('出错了!'); } catch (e) { &nbsp; console.log(e.name + ": " + e.message); &nbsp; console.log(e.stack); } // Error: 出错了! // &nbsp; at &lt;anonymous&gt;:3:9 // &nbsp; ... 
 </blockquote> 上面代码中，<code>try</code>代码块抛出错误（上例用的是<code>throw</code>语句），JavaScript 引擎就立即把代码的执行，转到<code>catch</code>代码块，或者说错误被<code>catch</code>代码块捕获了。<code>catch</code>接受一个参数，表示<code>try</code>代码块抛出的值。 如果你不确定某些代码是否会报错，就可以把它们放在<code>try...catch</code>代码块之中，便于进一步对错误进行处理。//点明何时使用try...catch 
 <blockquote> 
 try { &nbsp; f(); } catch(e) { &nbsp; // 处理错误 } 
 </blockquote> 上面代码中，如果函数<code>f</code>执行报错，就会进行<code>catch</code>代码块，接着对错误进行处理。 <code>catch</code>代码块捕获错误之后，程序不会中断，会按照正常流程继续执行下去。 
 <blockquote> 
 try { &nbsp; throw "出错了"; } catch (e) { &nbsp; console.log(111); } console.log(222); // 111 // 222 
 </blockquote> 上面代码中，<code>try</code>代码块抛出的错误，被<code>catch</code>代码块捕获后，程序会继续向下执行。 &nbsp; <code>catch</code>代码块之中，还可以再抛出错误，甚至使用嵌套的<code>try...catch</code>结构。 
 <blockquote> 
 var n = 100; 
 try { &nbsp; throw n; } catch (e) { &nbsp; if (e &lt;= 50) { &nbsp; &nbsp; // ... &nbsp; } else { &nbsp; &nbsp; throw e; &nbsp; } } // Uncaught 100 
 </blockquote> 上面代码中，<code>catch</code>代码之中又抛出了一个错误。 &nbsp; 为了捕捉不同类型的错误，<code>catch</code>代码块之中可以加入判断语句。 
 <blockquote> 
 try { &nbsp; foo.bar(); } catch (e) { &nbsp; if (e instanceof EvalError) { &nbsp; &nbsp; console.log(e.name + ": " + e.message); &nbsp; } else if (e instanceof RangeError) { &nbsp; &nbsp; console.log(e.name + ": " + e.message); &nbsp; } &nbsp; // ... } 
 </blockquote> 上面代码中，<code>catch</code>捕获错误之后，会判断错误类型（<code>EvalError</code>还是<code>RangeError</code>），进行不同的处理。 &nbsp; 6.finally 代码块 <code>try...catch</code>结构允许在最后添加一个<code>finally</code>代码块，表示不管是否出现错误，都必需在最后运行的语句。 
 <blockquote> 
 function cleansUp() { &nbsp; try { &nbsp; &nbsp; throw new Error('出错了……'); &nbsp; &nbsp; console.log('此行不会执行'); &nbsp; } finally { &nbsp; &nbsp; console.log('完成清理工作'); &nbsp; } } 
 cleansUp() // 完成清理工作 // Uncaught Error: 出错了…… // &nbsp; &nbsp;at cleansUp (&lt;anonymous&gt;:3:11) // &nbsp; &nbsp;at &lt;anonymous&gt;:10:1 
 </blockquote> 上面代码中，由于没有<code>catch</code>语句块，一旦发生错误，代码就会中断执行。 中断执行之前，会先执行<code>finally</code>代码块，然后再向用户提示报错信息。 
 <blockquote> 
 function idle(x) { &nbsp; try { &nbsp; &nbsp; console.log(x); &nbsp; &nbsp; return 'result'; &nbsp; } finally { &nbsp; &nbsp; console.log('FINALLY'); &nbsp; } } 
 idle('hello') // hello // FINALLY 
 </blockquote> 上面代码中，<code>try</code>代码块没有发生错误，而且里面还包括<code>return</code>语句，但是<code>finally</code>代码块依然会执行。而且，这个函数的返回值还是<code>result</code>。 &nbsp; 下面的例子说明，<code>return</code>语句的执行是排在<code>finally</code>代码之前，只是等<code>finally</code>代码执行完毕后才返回。 
 <blockquote> 
 var count = 0; function countUp() { &nbsp; try { &nbsp; &nbsp; return count; &nbsp; } finally { &nbsp; &nbsp; count++; &nbsp; } } 
 countUp() // 0 count // 1 
 </blockquote> 上面代码说明，<code>return</code>语句里面的<code>count</code>的值，是在<code>finally</code>代码块运行之前就获取了。 &nbsp; 下面是<code>finally</code>代码块用法的典型场景。 
 <blockquote> 
 openFile(); 
 try { &nbsp; writeFile(Data); } catch(e) { &nbsp; handleError(e); } finally { &nbsp; closeFile(); } 
 </blockquote> 上面代码首先打开一个文件，然后在<code>try</code>代码块中写入文件，如果没有发生错误，则运行<code>finally</code>代码块关闭文件；一旦发生错误，则先使用<code>catch</code>代码块处理错误，再使用<code>finally</code>代码块关闭文件。 &nbsp; 下面的例子充分反映了<code>try...catch...finally</code>这三者之间的执行顺序。 
 <blockquote> 
 function f() { &nbsp; try { &nbsp; &nbsp; console.log(0); &nbsp; &nbsp; throw 'bug'; &nbsp; } catch(e) { &nbsp; &nbsp; console.log(1); &nbsp; &nbsp; return true; // 这句原本会延迟到 finally 代码块结束再执行 &nbsp; &nbsp; console.log(2); // 不会运行 &nbsp; } finally { &nbsp; &nbsp; console.log(3); &nbsp; &nbsp; return false; // 这句会覆盖掉前面那句 return &nbsp; &nbsp; console.log(4); // 不会运行 &nbsp; } 
 &nbsp; console.log(5); // 不会运行 } 
 var result = f(); // 0 // 1 // 3 
 result // false 
 </blockquote> 上面代码中，<code>catch</code>代码块结束执行之前，会先执行<code>finally</code>代码块。 &nbsp; <code>catch</code>代码块之中，触发转入<code>finally</code>代码块的标志，不仅有<code>return</code>语句，还有<code>throw</code>语句。 
 <blockquote> 
 function f() { &nbsp; try { &nbsp; &nbsp; throw '出错了！'; &nbsp; } catch(e) { &nbsp; &nbsp; console.log('捕捉到内部错误'); &nbsp; &nbsp; throw e; // 这句原本会等到finally结束再执行 &nbsp; } finally { &nbsp; &nbsp; return false; // 直接返回 &nbsp; } } 
 try { &nbsp; f(); } catch(e) { &nbsp; // 此处不会执行 &nbsp; console.log('caught outer "bogus"'); } 
 // &nbsp;捕捉到内部错误 
 </blockquote> 上面代码中，进入<code>catch</code>代码块之后，一遇到<code>throw</code>语句，就会去执行<code>finally</code>代码块，其中有<code>return false</code>语句，因此就直接返回了，不再会回去执行<code>catch</code>代码块剩下的部分了。 &nbsp; <code>try</code>代码块内部，还可以再使用<code>try</code>代码块。 
 <blockquote> 
 try { &nbsp; try { &nbsp; &nbsp; consle.log('Hello world!'); // 报错 &nbsp; } &nbsp; finally { &nbsp; &nbsp; console.log('Finally'); &nbsp; } &nbsp; console.log('Will I run?'); } catch(error) { &nbsp; console.error(error.message); } // Finally // consle is not defined 
 </blockquote> 上面代码中，<code>try</code>里面还有一个<code>try</code>。 内层的<code>try</code>报错（<code>console</code>拼错了），这时会执行内层的<code>finally</code>代码块，然后抛出错误，被外层的<code>catch</code>捕获。 &nbsp; &nbsp; 后续补充 ... &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://wangdoc.com/javascript/features/error.html" rel="nofollow">https://wangdoc.com/javascript/features/error.html</a> //错误处理机制 <a href="https://davidwalsh.name/fix-javascript-errors" rel="nofollow">https://davidwalsh.name/fix-javascript-errors</a>&nbsp;//Jani Hartikainen - JavaScript Errors and How to Fix&nbsp;Them </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...