营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com
墨菲定律指出,任何可能出错的事情最终都会出错。 这在编程世界中应用得太好了。 如果您创建一个应用程序,您很可能会产生错误和其他问题。 JavaScript 中的错误就是这样一个常见问题!
软件产品的成功取决于其创建者在伤害用户之前解决这些问题的能力。 在所有编程语言中,JavaScript 因其平均错误处理设计而臭名昭著。
如果您正在构建一个 JavaScript 应用程序,那么您很有可能会在某一时刻弄乱数据类型。 如果不是这样,那么您最终可能会更换 不明确的 与 空值 或三等号运算符 (===
) 与双等号运算符 (==
)。
犯错是人之常情。 这就是为什么我们将向您展示您需要了解的有关处理 JavaScript 错误的所有信息。
本文将引导您了解 JavaScript 中的基本错误,并解释您可能遇到的各种错误。 然后,您将学习如何识别和修复这些错误。 还有一些技巧可以在生产环境中有效地处理错误。
事不宜迟,让我们开始吧!
什么是 JavaScript 错误?
编程错误是指程序无法正常运行的情况。 当程序不知道如何处理手头的工作时,可能会发生这种情况,例如在没有网络连接的情况下尝试打开不存在的文件或访问基于 Web 的 API 端点时。
这些情况促使程序向用户抛出错误,说明它不知道如何继续。 该程序收集尽可能多的有关错误的信息,然后报告它无法继续前进。
聪明的程序员试图预测和覆盖这些场景,这样用户就不必独立地找出像“404”这样的技术错误信息。 相反,它们显示了一条更容易理解的信息:“找不到该页面。”
JavaScript 中的错误是在发生编程错误时显示的对象。 这些对象包含有关错误类型、导致错误的语句以及发生错误时的堆栈跟踪的大量信息。 JavaScript 还允许程序员创建自定义错误,以便在调试问题时提供额外信息。
错误的属性
现在 JavaScript 错误的定义已经很清楚了,是时候深入研究细节了。
JavaScript 中的错误带有某些标准和自定义属性,有助于理解错误的原因和影响。 默认情况下,JavaScript 中的错误包含三个属性:
- 信息: 携带错误信息的字符串值
- 名称: 发生的错误类型(我们将在下一节深入探讨)
- 堆:发生错误时执行的代码的堆栈跟踪。
此外,错误还可以带有以下属性 列号,行号,文件名, 等,以更好地描述错误。 但是,这些属性不是标准的,可能会出现在 JavaScript 应用程序生成的每个错误对象中,也可能不会出现。
了解堆栈跟踪
堆栈跟踪是发生异常或警告等事件时程序所在的方法调用列表。 这是伴随异常的示例堆栈跟踪的样子:

如您所见,它首先打印错误名称和消息,然后是被调用的方法列表。 每个方法调用都说明其源代码的位置以及调用它的行。 您可以使用这些数据浏览您的代码库并确定是哪段代码导致了错误。
此方法列表以堆叠方式排列。 它显示了您的异常首次引发的位置以及它如何通过堆叠的方法调用传播。 为异常实现捕获不会让它通过堆栈向上传播并使您的程序崩溃。 但是,您可能希望在某些情况下故意不捕获致命错误以使程序崩溃。
错误与异常
大多数人通常将错误和异常视为同一件事。 但是,必须注意它们之间的细微但根本的区别。
为了更好地理解这一点,让我们举一个简单的例子。 以下是如何在 JavaScript 中定义错误:
const wrongTypeError = TypeError("Wrong type found, expected character")
这就是 wrongTypeError
对象变成一个例外:
throw wrongTypeError
然而,大多数人倾向于使用在抛出错误对象时定义错误对象的简写形式:
throw TypeError("Wrong type found, expected character")
这是标准做法。 然而,这也是开发人员倾向于混淆异常和错误的原因之一。 因此,即使您使用速记来快速完成工作,了解基础知识也至关重要。
JavaScript 中的错误类型
JavaScript 中有一系列预定义的错误类型。 只要程序员没有明确处理应用程序中的错误,它们就会由 JavaScript 运行时自动选择和定义。
本节将引导您了解 JavaScript 中一些最常见的错误类型,并了解它们发生的时间和原因。
范围错误
当变量设置为超出其合法值范围时,会引发 RangeError。 它通常发生在将值作为参数传递给函数时,并且给定值不在函数参数的范围内。 使用文档记录不佳的第三方库时,有时修复起来会很棘手,因为您需要知道参数的可能值范围才能传递正确的值。
RangeError 发生的一些常见场景是:
- 试图通过 Array 构造函数创建一个非法长度的数组。
- 将错误值传递给数字方法,例如
toExponential()
,toPrecision()
,toFixed()
, 等等。 - 将非法值传递给字符串函数,例如
normalize()
.
参考错误
当您的代码中的变量引用出现问题时,就会发生 ReferenceError。 您可能忘记在使用变量之前为其定义值,或者您可能试图在代码中使用不可访问的变量。 在任何情况下,通过堆栈跟踪提供了充足的信息来查找和修复有错误的变量引用。
ReferenceErrors 发生的一些常见原因是:
- 在变量名中打错字。
- 试图访问其范围之外的块范围变量。
- 在加载之前从外部库(如来自 jQuery 的 $)中引用全局变量。
语法错误
这些错误是最容易修复的错误之一,因为它们表明代码语法有错误。 由于 JavaScript 是一种解释而不是编译的脚本语言,因此当应用程序执行包含错误的脚本时会抛出这些脚本语言。 在编译语言的情况下,在编译过程中会识别出此类错误。 因此,在修复之前不会创建应用程序二进制文件。
可能发生 SyntaxErrors 的一些常见原因是:
- 缺少引号
- 缺少右括号
- 花括号或其他字符的不正确对齐
最好在 IDE 中使用 linting 工具在此类错误出现在浏览器之前为您识别这些错误。
类型错误
TypeError 是 JavaScript 应用程序中最常见的错误之一。 当某些值不是特定的预期类型时,会创建此错误。 发生时的一些常见情况是:
- 调用不是方法的对象。
- 试图访问空对象或未定义对象的属性
- 将字符串视为数字,反之亦然
发生 TypeError 的可能性还有很多。 稍后我们将查看一些著名的实例并学习如何修复它们。
内部错误
当 JavaScript 运行时引擎中发生异常时使用 InternalError 类型。 它可能表示也可能不表示您的代码存在问题。
通常,InternalError 仅在两种情况下发生:
- 当 JavaScript 运行时的补丁或更新带有引发异常的错误时(这种情况很少发生)
- 当你的代码包含对 JavaScript 引擎来说太大的实体时(例如太多的 switch case、太大的数组初始化器、太多的递归)
解决此错误的最合适方法是通过错误消息确定原因,并在可能的情况下重构您的应用程序逻辑,以消除 JavaScript 引擎上的工作负载突然激增。
URI错误
URIError 发生在全局 URI 处理函数如 decodeURIComponent
被非法使用。 它通常表示传递给方法调用的参数不符合 URI 标准,因此没有被方法正确解析。
诊断这些错误通常很容易,因为您只需要检查参数是否存在畸形。
评估错误
发生错误时会发生 EvalError eval()
函数调用。 这 eval()
函数用于执行存储在字符串中的 JavaScript 代码。 然而,由于使用 eval()
由于安全问题,强烈建议不要使用该函数,并且当前的 ECMAScript 规范不会抛出 EvalError
类不再存在,这种错误类型的存在只是为了保持与旧版 JavaScript 代码的向后兼容性。
如果您使用的是旧版本的 JavaScript,则可能会遇到此错误。 无论如何,最好调查在 eval()
任何异常的函数调用。
创建自定义错误类型
虽然 JavaScript 提供了足够的错误类型列表来涵盖大多数场景,但如果列表不满足您的要求,您始终可以创建新的错误类型。 这种灵活性的基础在于 JavaScript 允许您使用 throw
命令。
因此,从技术上讲,这些声明是完全合法的:
throw 8
throw "An error occurred"
但是,抛出原始数据类型不会提供有关错误的详细信息,例如其类型、名称或随附的堆栈跟踪。 为了解决这个问题并标准化错误处理过程, Error
课程已提供。 也不鼓励在抛出异常时使用原始数据类型。
您可以扩展 Error
类来创建您的自定义错误类。 以下是如何执行此操作的基本示例:
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}
您可以通过以下方式使用它:
throw ValidationError("Property not found: name")
然后您可以使用 instanceof
关键词:
try {
validateForm() // code that throws a ValidationError
} catch (e) {
if (e instanceof ValidationError)
// do something
else
// do something else
}
JavaScript 中最常见的 10 个错误
现在您已经了解了常见的错误类型以及如何创建自定义错误类型,是时候看看您在编写 JavaScript 代码时会遇到的一些最常见的错误了。
1. 未捕获的 RangeError
在几种不同的情况下,Google Chrome 中会出现此错误。 首先,如果您调用递归函数并且它不会终止,则可能会发生这种情况。 您可以在 Chrome 开发者控制台中自行查看:

因此,要解决此类错误,请确保正确定义递归函数的边界情况。 发生此错误的另一个原因是您传递的值超出了函数的参数范围。 这是一个例子:

错误消息通常会指出您的代码有什么问题。 一旦你做出改变,它就会得到解决。

2. Uncaught TypeError: Cannot set property
当您在未定义的引用上设置属性时会发生此错误。 您可以使用此代码重现该问题:
var list
list.count = 0
这是您将收到的输出:

要修复此错误,请在访问其属性之前使用值初始化引用。 以下是修复后的外观:

3. Uncaught TypeError: Cannot read property
这是 JavaScript 中最常发生的错误之一……
营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com