JS对象类型之Error错误对象的用法详解

作者:异步漫步

时间:2026-10-31

浏览:393

本文详解JavaScript中的Error对象,涵盖其属性、七种内置错误类型(如TypeError、SyntaxError等)及用法。深入解析throw语句抛出错误的机制,以及try...catch...finally块如何捕获和处理同步与异步错误,包括自定义错误对象的创建与最佳实践。

文章目录

Error是JavaScript的原生内置对象。当代码解析或执行过程中出现异常时,JavaScript引擎会自动生成并抛出该对象的实例,导致程序在错误发生处终止运行。

根据ECMA-262规范,Error对象包含两个核心属性:message用于存储具体的错误信息,name用于标识错误的类型名称。

通过Error()构造函数可以创建新的Error实例。该构造函数接收一个参数作为错误信息,并将其赋值给message属性;若未提供参数,则使用预定义的默认字符串作为属性值。

new Error()
new Error('错误消息')
 
// 可以省略new操作符
Error()
Error('错误消息')
 
// 通常使用throw语句来抛出错误
throw Error('错误消息')
throw Error()

Error对象提供toString()方法,调用后返回格式为'Error'拼接message属性值的字符串。

Error类型

ECMA-262标准定义了七种具体的错误类型:

Error()     // 基类型
EvalError()  // eval错误
RangeError() // 范围错误
ReferenceError() // 引用错误
SyntaxError() // 语法错误
TypeError()  // 类型错误
URIError() // URI错误

Error是基础类型,其他所有错误类型均继承自它,开发者可利用它来抛出自定义错误。

其余六种错误类型均为Error对象的派生类。在JavaScript中,数组(Array)和函数(Function)也是特殊的对象类型。

EvalError()

当eval()函数执行出错时会抛出EvalError。该类型在ES5标准中已不再实际出现,但为了保持向后兼容性而被保留。

// Uncaught TypeError: eval is not a constructor
new eval()
// 不会报错
eval = () => {}

RangeError()

当数值超出有效范围时,会抛出RangeError(范围错误)。例如,尝试将数组长度设置为负数时会触发此错误。

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

ReferenceError()

当引用不存在的变量或左值时,会抛出ReferenceError(引用错误)。

a; // Uncaught ReferenceError: a is not defined

SyntaxError()

在代码解析阶段,如果代码不符合语法规则,会抛出SyntaxError(语法错误)。

示例1

var 1bar = 1; // SyntaxError: Invalid or unexpected token

示例2

function fn() {
    // Uncaught SyntaxError: Unexpected token '}'
    var a = 
}
 
fn();

TypeError()

当执行某些操作时,若数据类型不符合要求,会抛出TypeError(类型错误)。

null.toString() // Uncaught TypeError: Cannot read property 'toString' of null

URIError()

当调用URI相关函数(如decodeURI、encodeURI、decodeURIComponent、encodeURIComponent、escape、unescape)且参数不正确时,会发生URIError错误。

decodeURI('%2') // Uncaught URIError: URI malformed at decodeURIComponent 

Error事件

任何未被try...catch处理的错误都会触发window对象的error事件。该事件接收五个参数:

message:错误信息(字符串)
source:发生错误的脚本URL(字符串)
lineno:发生错误的行号(数字)
colno:发生错误的列号(数字)
error:Error对象(对象)
// 示例1 DOM0级
window.onerror = function(message, source, lineno){
   console.log(message, source, lineno)
}
 
// 示例2 DOM2级
window.addEventListener('error', function(event){
    console.log(event.message, event.source, event.lineno)
});

图像元素也支持error事件。当img元素的src属性指向的URL无法返回可识别的图像格式时,会触发该事件,且触发时图片下载已结束。

var img = new Image()
img.src='a.jpg'
img.onerror = function(e) {
  console.log(e)
}

Throw语句

throw语句用于手动抛出错误,其后必须指定一个值作为错误信息,该值的类型不限。

参考:throw - JavaScript | MDN

throw语句用于抛出用户自定义的异常。执行throw后,当前函数的执行将立即停止(throw之后的语句不再执行),控制权转移至调用堆栈中第一个匹配的catch块。若调用者函数中没有catch块,程序将终止。

throw 'hello world';
 
throw new Error('something bad happened');
 
throw new SyntaxError('I don\'t like your syntax.');
throw new TypeError('what type of variable do you take me for?');
throw new RangeError('sorry,you just don\'t have the range.');
throw new EvalError('That doesn\'t evaluate.');
throw new URIError('URI, is that you?');
throw new ReferenceError('you didn\'t cite your references properly');

可以通过原型链继承Error对象来创建自定义错误类型。

function CustomError(message) {
	this.name = 'CustomError'
	this.message = message
}
 
CustomError.prototype = new Error()
throw new CustomError('custom error')

Try...Catch...语句

try...catch的作用是将可能引发错误的代码置于try块中,在catch块中捕获并处理错误,从而决定程序是否继续执行。

try-catch语句用于捕获和处理JavaScript中的异常。try从句定义可能抛出异常的代码块,catch从句定义当try抛出异常时执行的代码。若try中的任何代码抛出异常,代码执行将终止并立即跳转至catch块。

catch从句后可跟finally从句,用于放置清理代码。无论try是否抛出错误,finally中的代码都会执行。catch和finally均为可选,但try必须至少与其中之一组合成完整语句。

try {
  // 这里可能会产生错误,可能是程序错误,可能是throw语句抛出的错误
}catch(e) {
  // 当try中抛出错误时这里才执行,变量e包含了错误信息
  // 可以根据错误类型处理错误,也可以再次抛出错误
}finally{
  // 无论try是否抛出异常,这里代码正常执行。即使try中出现return语句。
}
function fn() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true;
  } finally {
    console.log(2);
    return false; // 这句会覆盖掉前面的return
  }
  console.log(3); // 不会运行
}
var result = fn();
// 0
// 1
// 2
 
console.log(result) // false

● try代码块中的错误会被catch捕获;若未手动抛出错误,则不会触发window的错误捕获。

try {
  throw new Error('出错了!');
} catch (e) {
  console.dir(e);
  throw e
}

运行结果:

Error类型

注意:在catch中抛出异常时,应使用throw e,而非throw new Error(e)。因为e本身已是Error对象(由try中使用throw抛出的new Error()创建),具有完整的堆栈信息stack;使用new Error会改变堆栈信息,将堆栈定位到当前行。

● try...finally...结构无法捕获错误。

以下代码由于缺少catch块,错误会直接由window捕获。

try {
    throw new Error('出错啦啦啦')
} finally {
    console.log('啦啦啦')
}

运行结果:

Error类型

● try...catch...只能捕获同步代码的错误,无法捕获异步代码错误。

以下代码中的错误将无法被catch捕获。

try {
    setTimeout(() => {
        throw new Error('出错啦!')
    })
} catch(e){
    // 不会执行
    console.dir(e)
}

因为setTimeout是异步任务,其回调函数被放入宏任务队列;而catch中的代码属于同步任务,在当前事件队列中立即执行。当setTimeout回调执行时,try/catch代码块已不在调用栈中,因此错误无法被捕获。

以上就是JS对象类型之Error错误对象的用法详解的详细内容,更多关于JS Error错误对象用法的资料请关注本站其它相关文章!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章