JavaScript十大常见错误(摘要)

前言

在回顾了数千个项目后，我们发现了10个最常见的JavaScript错误。我们将告诉您是什么导致了这些错误，以及如何防止它们发生。如果你能避免陷入这些“陷阱”，你将成为一名更好的开发人员。

常见的JavaScript错误前10名：

为了阅读方便，我们尽量简化每个错误的描述。接下来，让我们深入每一个错误，了解是什么导致了它，以及如何避免它。

1、未捕获类型错误：无法读取属性

如果你是一个JavaScript开发人员，你可能会比你想象的更多次地看到这个错误。当您读取未定义对象的属性或调用其方法时，此错误将出现在Chrome中。您可以在Chrome开发人员控制台中轻松测试它。

造成这种情况的原因有很多，但最常见的是呈现UI组件时状态初始化不当。

让我们看一个在实际应用程序中发生的例子：我们选择了React，但同样适用于Angular、Vue或任何其他框架。

两个重要的过程：

组件的状态(如this.state)以undefined开头。当异步获取数据时，无论它是在构造函数componentWillMount还是componentDidMount中获取的，组件都会在加载数据之前至少呈现一次。首次呈现测验时，this.state.items未定义。这个很容易解决。最简单的方法：初始化构造函数中的状态。

您的应用程序中的具体代码可能有所不同，但我们希望我们已经给了您足够的线索来解决或避免您的应用程序中的这个问题。如果没有，请继续阅读，因为我们将在下面介绍更多相关错误的例子。

2、类型错误：“未定义”不是对象

这是在Safari中读取未定义对象的属性或调用方法时出现的错误。您可以在Safari开发人员控制台中轻松测试它。这与第一点中提到的Chrome的错误基本相同，但是Safari使用了不同的错误消息提示。

3、类型错误： null不是对象

这是在Safari中读取空对象的属性或调用空对象的方法时出现的错误。您可以在Safari开发人员控制台中轻松测试它。

有趣的是，null和undefined在JavaScript中是不同的，这就是为什么我们会看到两种不同的错误消息。

Undefined通常是一个尚未赋值的变量，null表示该值为空。要验证它们是否相等，请尝试使用严格相等运算符===

在我们的工作中，可能发生这种错误的一种情况是，如果我们在加载元素之前尝试使用JavaScript中的元素。因为对于空白对象引用，DOM API返回null。

任何执行和处理DOM元素的JS代码都应该在创建DOM元素之后执行。

JS代码按照HTML中的规定从上到下进行解释。因此，如果DOM元素前面有一个标记，那么当浏览器解析HTML页面时，脚本标记中的JS代码将被执行。如果在加载脚本之前没有创建DOM元素，就会出现这个错误。

在这个例子中，我们可以通过添加一个监听器来解决这个问题，监听器会在页面准备好的时候通知我们。一旦addEventListener被触发，init()方法就可以使用DOM元素。

4、(未知):脚本错误

当浏览器的跨域策略限制了未捕获的JavaScript错误(由window.onerror处理程序引发的错误，而不是在try-catch中捕获的错误)时，就会发生这种脚本错误。例如，如果您将JavaScript代码托管在CDN上，任何未捕获的错误都将被报告为“脚本错误”，而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止数据跨域传输，否则将不允许通信。

要获得真正的错误消息，请执行以下操作：

1.设置“访问控制-允许-来源”标题

将访问控制允许源头设置为*意味着可以从任何域正确访问资源。

在Nginx中设置如下：

将add_header指令添加到提供JavaScript文件的位置块：

2.在脚本中设置crossorigin='匿名'

在您的HTML代码中，对于您为其设置了访问控制-允许-起源的每个脚本，在脚本标签上设置crossorigin=“匿名”。在将crossorigin属性添加到脚本标记之前，请确保验证上述标头是否正确发送。

在火狐中，如果crossorigin属性存在，但是Access-Control-Allow-Origin头不存在，脚本将不会被执行。

5、类型错误：对象不支持属性

当您调用未定义的方法时，这是IE中的一个错误。可以在IE开发者控制台进行测试。

这相当于Chrome中的“type error:undefined”不是“function”错误。

是的，对于同一个逻辑错误，不同的浏览器可能会有不同的错误消息。

对于使用JavaScript命名空间的Web应用，这是IE浏览器的常见问题。在这种情况下，99.9%的原因是IE无法将当前命名空间中的方法绑定到这个关键字。

例如，如果您有一个命名空间Rollbar，并且在JS中有一个方法isAwesome。通常，如果您在Rollbar命名空间中，可以使用以下语法调用isAwesome方法：

this . isawesome()；Chrome、Firefox和Opera将采用这种语法。但是IE没有。因此，使用JS命名空间时最安全的选择是始终以实际命名空间作为前缀。

roll bar . isawesome()；6、TypeError:“未定义”不是函数

这是在Chrome中调用未定义函数时产生的错误。可以在Chrome开发者控制台和Mozilla Firefox开发者控制台进行测试。

执行上述代码将导致以下错误：

未捕获类型错误：此. clearBoard不是一个函数.

原因要明确，就是执行上下文不理解，导致指向错误。

7、未捕获范围错误

当您调用不终止的递归函数时，会出现此错误。您可以在Chrome开发人员控制台中测试它。

此外，如果将值传递给超出范围的函数，可能会发生这种情况。

许多函数只接受特定输入值范围内的数字。例如：

整数(位数)和整数(位数)接受0到100精度(位数)接受1到100

8、类型错误：无法读取属性“长度”

这是因为读取未定义变量的长度属性时出错。您可以在Chrome开发人员控制台中测试它。

您通常会在数组中找到定义的长度，但是如果数组未初始化或者变量在另一个上下文中，您可能会遇到此错误。让我们用下面的例子来理解这个错误。

执行上述代码将报告一个错误：

无法读取未定义的属性“length”

有两种方法可以解决这个问题：

或者

9、未捕获类型错误：无法设置属性

当我们试图访问一个未定义的变量时，它总是返回undefined，我们不能获取或设置任何未定义的属性。在这种情况下，将引发“不清楚的typeerror :无法设置属性”。

10.未定义引用错误：事件

当您试图访问未定义的变量或超出当前范围的变量时，会引发此错误。可以在Chrome浏览器中测试。

如果在使用事件时遇到此错误，请确保使用传入的事件对象作为参数。像IE这样的旧浏览器提供了一个全局变量事件，但并不是所有的浏览器都支持它。

摘要

我们看到上面10个最常见的错误，但是涉及到的知识点并不难。当你仔细阅读《你不知道的 JavaScript》的第一卷时，这些错误基本上不会再出现了。

归根结底，JavaScript的基础知识并不扎实。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。