认识达内从这里开始

任何一个专业的学习或者工作中都有出错的时候，对于JavaScript也是如此，今天达内教育就针对JavaScript方面的知识点给大家介绍下，来看看吧，3大JavaScript常见的错误都在这里了!

查看了数千个项目后，发现了3个最常见的JavaScript错误提示。我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。如果你能够避免落入这些“陷阱”，你将会成为一个更好的开发者。

JavaScript常见错误Top3：

为了便于阅读，我们将每个错误描述都尽量简化。接下来，让我们深入到每一个错误，来了解是什么会导致它，以及如何避免这个问题。

1、UncaughtTypeError:Cannotreadproperty

如果你是一个JavaScript开发人员，可能你看到这个错误的次数比你想的要多。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在Chrome中出现。您可以很容易的在Chrome开发者控制台中进行测试。

发生这种情况的原因很多，但常见的一种是在渲染UI组件时对于状态的初始化操作不当。

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

两个重要的流程：

组件的状态(例如this.state)开始于undefined。

当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当Quiz第一次呈现时，this.state.items是undefined。

这很容易解决。最简单的方法：在构造函数中初始化state。

在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。

2、TypeError:‘undefined’isnotanobject

这是在Safari中读取属性或调用未定义对象上的方法时发生的错误。您可以在SafariDeveloperConsole中轻松测试。这与第一点中提到的Chrome的错误基本相同，但Safari使用了不同的错误消息提示语。

3、TypeError:nullisnotanobject

这是在Safari中读取属性或调用空对象上的方法时发生的错误。您可以在SafariDeveloperConsole中轻松测试。

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

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

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

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

JS代码按照HTML中的规定从上到下进行解释。所以，如果DOM元素之前有一个标签，脚本标签内的JS代码将在浏览器解析HTML页面时执行。如果在加载脚本之前尚未创建DOM元素，则会出现此错误。

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

总结

我们看到上面的3个最常见的错误，其实所涉及的知识点并不难。当你认真读过《你不知道的JavaScript》上卷后，这些错误基本就不会再出现了。

归根结底是对JavaScript基础知识掌握的不扎实。

【免责声明】本文部分系转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与联系我们，我们会予以更改或删除相关文章，以保证您的权益！