10 种 JavaScript 最常见的错误

 媒介

查察了数千个项目后，发明白 10 个最常见的 JavaScript 错误。我们会汇报你什么缘故起因导致了这些错误，以及怎样防备这些错误产生。假如你可以或许停止落入这些 “陷阱”，你将会成为一个更好的开拓者。

JavaScript 常见错误 Top 10：

为了便于阅读，我们将每个错误描写都只管简化。接下来，让我们深入到每一个错误，来相识是什么会导致它，以及怎样停止这个题目。

1、Uncaught TypeError: Cannot read property

假如你是一个 JavaScript 开拓职员，也许你看到这个错误的次数比你想的要多。当你读取一个未界说的工具的属性或挪用其要领时，这个错误会在 Chrome 中呈现。 您可以很轻易的在 Chrome 开拓者节制台中举办测试。

产生这种环境的缘故起因许多，但常见的一种是在渲染 UI 组件时对付状态的初始化操纵不妥。

我们来看一个在真实应用措施中产生的例子：我们选择 React，但该环境也同样合用于 Angular、Vue 或任何其他框架。

两个重要的流程：

1. 组件的状态(譬喻 this.state)开始于 undefined。
2. 当异步获取数据时，不管它是在结构函数 componentWillMount 照旧 componentDidMount 中获取的，组件在数据加载之前至少会泛起一次，当 Quiz 第一次泛起时， this.state.items 是 undefined。

这很轻易办理。最简朴的要领：在结构函数中初始化 state。

在你的应用措施中的详细代码也许是差异的，但我们但愿我们已经给你足够的线索，以办理或停止在你的应用措施中呈现的这个题目。假如还没有，请继承阅读，由于我们将在下面包围更多相干错误的示例。

2、 TypeError: ‘undefined’ is not an object

这是在 Safari 中读取属性或挪用未界说工具上的要领时产生的错误。您可以在 Safari Developer Console 中轻松测试。这与第一点中提到的 Chrome 的错误基内情同，但 Safari 行使了差异的错误动静提醒语。

3、 TypeError: null is not an object

这是在 Safari 中读取属性或挪用空工具上的要领时产生的错误。 您可以在 Safari Developer Console 中轻松测试。

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

undefined 凡是是一个尚未分派的变量，而 null 暗示该值为空。 要验证它们不相称，请实行行使严酷的相称运算符 ===

在我们事变中，这种错误也许产生的一种场景是：假如在加载元素之前实行在 JavaScript 中行使元素。 由于 DOM API 对付空缺的工具引用返回值为 null。

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

JS 代码凭证 HTML 中的划定从上到下举办表明。 以是，假如 DOM 元素之前有一个标签，剧本标签内的 JS 代码将在赏识器理会 HTML 页面时执行。 假如在加载剧本之前尚未建设 DOM 元素，则会呈现此错误。

在这个例子中，我们可以通过添加一个 Listener 来办理这个题目，这个变乱侦查会在页面筹备好的时辰关照我们。 一旦 addEventListener 被触发， init() 要领就可以行使 DOM 元素。

4、 (unknown): Script error

当未捕捉的 JavaScript 错误(通过 window.onerror 处理赏罚措施激发的错误，而不是捕捉在 try-catch 中)被赏识器的跨域计策限定时，会发生这类的剧本错误。 譬喻，假如您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕捉的错误将被陈诉为“剧本错误” 而不是包括有效的仓库信息。这是一种赏识器安详法子，旨在防备跨域转达数据，不然将不应承举办通讯。

要得到真正的错误动静，请执行以下操纵：

1. 配置 ‘Access-Control-Allow-Origin’ 头部

将 Access-Control-Allow-Origin 标头配置为 * 暗示可以从任何域正确会见资源。

在 Nginx 中配置如下：

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

2. 在 <script> 中配置 crossorigin="anonymous"

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!