10 种 JavaScript 最常见的错误( 二 ) _JavaScript

4、 (unknown): Script error当未捕获的 JavaScript 错误（通过 window.onerror 处理程序引发的错误，而不是捕获在 try-catch 中）被浏览器的跨域策略限制时，会产生这类的脚本错误。例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。
要获得真正的错误消息，请执行以下操作：
1. 设置 ‘Access-Control-Allow-Origin’ 头部

将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。

在 Nginx 中设置如下：
将 add_header 指令添加到提供 JavaScript 文件的位置块中：
location ~ ^/assets/ { add_header Access-Control-Allow-Origin *;}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“ is not a function” 错误。

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

对于使用 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 开发人员控制台中进行测试。

文章插图

function clearBoard(){ alert("Cleared");}document.addEventListener("click", function(){ this.clearBoard(); // what is “this” ?});执行上面的代码会导致以下错误：

“Uncaught TypeError：this.clearBoard is not a function” 。

原因应该是清楚的，即执行上下文不理解导致的指向错误。
7、 Uncaught RangeError当你调用一个不终止的递归函数就会发生这种错误。您可以在 Chrome 开发者控制台中进行测试。

文章插图

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

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

toExponential(digits) 和 toFixed(digits) 接受 0 到 100
toPrecision(digits) 接受 1 到 100

var num = 2.555555;console.log(num.toExponential(4)); //OKconsole.log(num.toExponential(-2)); //range error!console.log(num.toFixed(2)); //OKconsole.log(num.toFixed(105)); //range error!console.log(num.toPrecision(1)); //OKconsole.log(num.toPrecision(0)); //range error!8、 TypeError: Cannot read property ‘length’这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。您可以在 Chrome 开发者控制台中进行测试。

文章插图

您通常会在数组中找到定义的长度，但是如果数组未初始化或者变量在另一个上下文中，则可能会遇到此错误。让我们用下面的例子来理解这个错误。
var testArray = ["Test"];function testFunction(testArray) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}testFunction();