10个常见的JS语言错误总汇-技术圈

1、 Uncaught TypeError: Cannot Read Property

这是 JavaScript 开发人员最常遇到的错误。当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。

2、 TypeError: ‘undefined’ Is Not an Object (evaluating...)

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

3、TypeError: Null Is Not an Object (evaluating...)

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

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。要验证它们不相等，请尝试使用严格的相等运算符 ===：

在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。因为 DOM API 对于空白的对象引用返回值为 null。

任何执行和处理 DOM 元素的 js 代码都应该在创建 DOM 元素之后执行。js 代码按照 html 中的规定从上到下进行解释。

所以，如果 DOM 元素之前有一个标签，脚本标签内的 js 代码将在浏览器解析 html 页面时执行。如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。

4、(unknown): Script Error

当未捕获的 JavaScript 错误违背跨边界原则时，就会发生脚本错误。例如，如果将 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误（通过 window.onerror 处理程序发出的错误，而不是 try-catch 中捕获到的错误）将仅报告为“脚本错误”。这是浏览器的一种安全措施，主要用于防止跨域传递数据的情况出现。

将 Access-Control-Allow-Origin 设置为 *，表示可以从任何域正确访问资源。* 如有必要，也可以用自己的域名进行替换，例如：


Access-Control-Allow-Origin: www.example.com

5、 TypeError: Object Doesn’t Support Property

当调用未定义的方法时，IE 中会发生这样的错误。这相当于 Chrome 中的 “undefined’ is not a function” 错误。

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

这是在 IE 的 Web 应用程序中使用 JavaScript 命名空间出现的一个常见问题。

出现这种情况的绝大部分原因是IE无法将当前名称空间内的方法绑定到this关键字。

6、TypeError: ‘undefined’ Is Not a Function

当调用未定义的函数时，Chrome 中就会发生这样的错误。

随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和闭包中的自引用范围也相应增加，这是造成这种混乱现象的主要来源。

7、Uncaught RangeError: Maximum Call Stack

这是在很多种情况，Chrome 中发生的错误，一种情况是当你调用一个不会终止的递归函数时。

如果将值传递给超出范围的函数，也可能会发生这种情况。许多函数只接受特定范围内的数字输入值。

8、TypeError: Cannot Read Property ‘length’

这是 Chrome 中发生的错误，因为读取了未定义长度属性的变量。通常在数组中能够找到定义的长度，但是如果数组未初始化或变量名在另一个上下文中隐藏，则可能会出现这种错误。

9、 Uncaught TypeError: Cannot Set Property

当尝试访问未定义的变量时，总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。

在这种情况下，应用程序将抛出“Uncaught TypeError cannot set property of undefined”。

10、ReferenceError: Event Is Not Defined

尝试访问未定义的变量或当前范围之外的变量时会引发此错误。如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。

IE 这样的浏览器提供了全局变量事件，Chrome 会自动将事件变量附加到处理程序中，Firefox 则不会自动添加事件变量。

结论

事实证明很多这些 null 或 undefined 的错误是普遍存在的。一个类似于 Typescript 这样的好的静态类型检查系统，当设置为严格的编译选项时，能够帮助开发者避免这些错误。