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 错误(通过 r 处理程序引发的错误，⽽不是捕获在 try-catch 中)被浏览器的跨域策略限制时，会产⽣这类的脚本错误。例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” ⽽不是包含有⽤的堆栈信息。这是⼀种浏览器安全措施，旨在防⽌跨域传递数据，否则将不允许进⾏通信。
要获得真正的错误消息，请执⾏以下操作：
1. 设置 ‘Access-Control-Allow-Origin' 头部
将 Access-Control-Allow-Origin 标头设置为 * 表⽰可以从任何域正确访问资源。
在 Nginx 中设置如下：
将 add_header 指令添加到提供 JavaScript ⽂件的位置块中：
javascript全局数组2. 在 <script> 中设置 crossorigin="anonymous"
在您的 HTML 代码中，对于您设置了 Access-Control-Allow-Origin 的每个脚本，在 script 标签上设置
crossorigin=“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。
在 Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执⾏。
5、 TypeError: Object doesn't support property
这是您在调⽤未定义的⽅法时发⽣在 IE 中的错误。您可以在 IE 开发者控制台中进⾏测试。
这相当于 Chrome 中的 “TypeError：”undefined“isnotafunction” 错误。
是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。
对于使⽤ JavaScript 命名空间的 Web 应⽤程序，这是⼀个 IE 浏览器的常见的问题。在这种情况下，99.9％的原因是 IE ⽆法将当前名称空间内的⽅法绑定到 this 关键字。
例如：如果你 JS 中有⼀个命名空间 Rollbar 以及⽅法 isAwesome。通常，如果您在 Rollbar 命名空间内，则可以使⽤以下语法调⽤ isAwesome ⽅法：
this.isAwesome();
Chrome，Firefox 和 Opera 会欣然接受这个语法。但是 IE 却不会。因此，使⽤ JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。
Rollbar.isAwesome();
6、 TypeError: ‘undefined' is not a function
当您调⽤未定义的函数时，这是 Chrome 中产⽣的错误。您可以在 Chrome 开发⼈员控制台和 Mozilla Firefox 开发⼈员控制台中进⾏测试。
执⾏上⾯的代码会导致以下错误：
“Uncaught TypeError：this.clearBoard is not a function”。
原因应该是清楚的，即执⾏上下⽂不理解导致的指向错误。
7、 Uncaught RangeError
当你调⽤⼀个不终⽌的递归函数就会发⽣这种错误。您可以在 Chrome 开发者控制台中进⾏测试。
此外，如果您将值传递给超出范围的函数，也可能会发⽣这种情况。
许多函数只接受其输⼊值的特定范围的数字。例如：
toExponential(digits) 和 toFixed(digits) 接受 0 到 100
toPrecision(digits) 接受 1 到 100
8、 TypeError: Cannot read property ‘length'
这是因为读取未定义变量的长度属性⽽发⽣的错误。您可以在 Chrome 开发者控制台中进⾏测试。
您通常会在数组中到定义的长度，但是如果数组未初始化或者变量在另⼀个上下⽂中，则可能会遇到此错误。让我们⽤下⾯的例⼦来理解这个错误。
执⾏以上代码会报错：
Cannot read property 'length' of undefined
有两种⽅法可以解决这个问题：
或
9、 Uncaught TypeError: Cannot set property
当我们尝试访问⼀个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。在这种情况下会将抛出 “Uncaught TypeError: Cannot set property”。
10. ReferenceError: event is not defined
当您尝试访问未定义的变量或超出当前作⽤域的变量时，会引发此错误。您可以在 Chrome 浏览器中测试。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。