1000多个项目中的十大JavaScript错误以及如何避免

分类：JavaScript作者：葡萄城技术团队

 

本文翻译自：https://dzone.com/articles/top-10-javascript-errors-from-1000-projects-and-ho-1

转载请注明出自：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

 

通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。

对于这些错误发生的次数，我们是通过收集的数据统计得出的。Rollbar 会收集每个项目中的所有错误，并总结每个错误发生的次数，然后通过各个错误的特征进行分组。

下图是发生次数最多的10大 JavaScript 错误：

 

 

下面开始深入探讨每个错误发生的情况，以便确定导致错误发生的原因以及如何避免。

 

1.   Uncaught TypeError: Cannot Read Property

这是 JavaScript 开发人员最常遇到的错误。当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。

导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。我们来看一个真实的应用程序中发生这种情况的例子。

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

以上代码有两个重要方面：

  1. 一是组件的状态（例如 this.state），在开始生命周期之前是 undefined 状态。
  2. 二是当通过异步的方式获取数据时，无论是在构造函数中 componentWillMount 中，还是在构造函数中提取 componentDidMount，组件在数据加载之前至少会渲染一次。当检测首次渲染时，会发现 this.state.items 是未定义的。此时就会出现一个错误 -“Uncaught TypeError: Cannot read property ‘map’ of undefined" in the consol”。

解决的方法很简单：在构造函数中使用合理的默认值进行状态初始化。

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

 

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

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误，这与 Chrome 的上述错误基本相同，只是 Safari 使用不同的错误消息。

 

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

这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。

有趣的是，在 JavaScript 中，null 和 undefined 是两种不同的类型，这就是为什么会出现两个不同的错误消息。未定义通常是一个尚未分配的变量，而 null 则表示该值为空。要验证它们不相等，请使用严格的相等运算符：

在实际情况中，导致这种错误的原因之一是：在元素加载之前，就尝试在 JavaScript 中使用 DOM 元素。这是因为 DOM API 对于空白的对象引用返回 null。

任何执行和处理 DOM 元素的 JS 代码，都应该在创建 DOM 元素之后执行。JS 代码按照 HTML 中的规定自上而下进行解释。因此，如果在 DOM 元素之前存在标签，则脚本标签内的 JS 代码就会在浏览器分析 HTML 页面时执行。如果在加载脚本之前尚未创建 DOM 元素，就会出现这样的错误。

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

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

 

4. (unknown): Script Error

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

要获取真实的错误消息，需要执行以下操作：

1.    Access-Control-Allow-Origin

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

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

以下是在各种环境中设置的一些示例：

Apache

在 JavaScript 文件夹中，创建一个 .htaccess 文件，并包含以下内容：

Header add Access-Control-Allow-Origin "*"

Nginx

将 add_header 指令添加到提供 JavaScript 文件的 location block 中：

location ~ ^/assets/ {
    add_header Access-Control-Allow-Origin *;
}

HAProxy

将以下内容添加到提供 JavaScript 文件的静态资源配置后端：

rspadd Access-Control-Allow-Origin:\ *

2.    在脚本标签上设置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 中会发生这样的错误。

这相当于 Chrome 中的 “undefined’ is not a function” 错误。对于相同的逻辑错误，不同的浏览器可能会有不同的错误消息。

这是在 IE 的 Web 应用程序中使用 JavaScript 命名空间出现的一个常见问题。出现这种情况的绝大部分原因是IE无法将当前名称空间内的方法绑定到this关键字。例如，如果你有 JS Rollbar 方法的命名空间 isAwesome。通常，如果位于 Rollbar 命名空间内，则可以使用以下语法调用该 isAwesome 方法：

this.isAwesome();

Chrome、Firefox 和 Opera 接受这种语法，IE则不接受。因此，使用 JS 命名空间时最安全的做法是：始终以实际名称空间作为前缀。

Rollbar.isAwesome();

 

6. TypeError: ‘undefined’ Is Not a Function

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

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

正如下面的示例代码片段：

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError: undefined is not a function。” 发生以上错误的原因是，当你调用 setTimeout(  )  时，实际上是在调用 window.setTimeout(  )，传递给 setTimeout(  ) 的匿名函数是在窗口对象的上下文中定义的，而该窗口对象没有 clearBoard(  ) 方法。

符合旧版浏览器的解决方案是以变量的方式简单地将引用保存在 this 中，然后通过闭包继承。例如：

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard();  
  }, 0);
};

或者，在较新的浏览器中，使用 bind(  ) 方法传递引用：

function testFunction () {
  this.clearLocalStorage();
  this.timer = setTimeout(this.reset.bind(this), 0);  // bind to 'this'
};
function testFunction(){
    this.clearBoard();    //back in the context of the right 'this'!
};

 

7. Uncaught RangeError: Maximum Call Stack

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

如果将值传递给超出范围的函数，也可能会发生这种情况。许多函数只接受特定范围内的数字输入值。例如，Number.toExponential( digits ) 与 Number.toFixed( digits) 接受的参数范围为从0到20，而 Number.toPrecision( digits ) 接受的数字范围为从1至21。

var a = new Array(4294967295);  //OK
var b = new Array(-1); //range error
var num = 2.555555;
document.writeln(num.toExponential(4));  //OK
document.writeln(num.toExponential(-2)); //range error!
num = 2.9999;
document.writeln(num.toFixed(2));   //OK
document.writeln(num.toFixed(25));  //range error!
num = 2.3456;
document.writeln(num.toPrecision(1));   //OK
document.writeln(num.toPrecision(22));  //range error!

 

8. TypeError: Cannot Read Property ‘length’

这是 Chrome 中发生的错误，因为读取了未定义长度属性的变量。

通常在数组中能够找到定义的长度，但是如果数组未初始化或变量名在另一个上下文中隐藏，则可能会出现这种错误。让我们用下面的例子来解释这种错误。

var testArray= ["Test"];
function testFunction(testArray) {
    for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}
testFunction();

当用参数声明一个函数时，这些参数会成为本地参数。这意味着即使你有名称变量 testArray，函数中具有相同名称的参数仍会被视为本地参数。

有两种方法可以解决这个问题：

1. 删除函数声明语句中的参数：

var testArray = ["Test"];
/* Precondition: defined testArray outside of a function */
function testFunction(/* No params */) {
        for (var i = 0; i < testArray.length; i++) {
              console.log(testArray[i]);
        }
}
testFunction();

2. 调用传递给我们声明的数组函数：

var testArray = ["Test"];
function testFunction(testArray) {
for (var i = 0; i < testArray.length; i++) {
        console.log(testArray[i]);
        }
}
testFunction(testArray);

 

9. Uncaught TypeError: Cannot Set Property

当尝试访问未定义的变量时，总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。在这种情况下，应用程序将抛出“Uncaught TypeError cannot set property of undefined”。

例如，在 Chrome 浏览器中，如果 test 对象不存在，就会出现这种错误：

所以就需要在访问变量之前，对变量进行定义。

 

10. ReferenceError: Event Is Not Defined

尝试访问未定义的变量或当前范围之外的变量时会引发此错误。

 

如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。IE 这样的浏览器提供了全局变量事件，Chrome 会自动将事件变量附加到处理程序中，Firefox 则不会自动添加事件变量。

document.addEventListener("mousemove", function (event) {
  console.log(event);
})

 

结论

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

最后也希望通过本文，可以帮助开发者更好避免或是应对以上的10种错误。

 

相关阅读：

2017年 JavaScript 框架回顾 -- 前端框架

2017年 JavaScript 框架回顾 -- React生态系统

2017年 JavaScript 框架回顾 -- 后端框架

 

原文地址：https://www.cnblogs.com/powertoolsteam/p/top-10-javascript-errors.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

哪些JavaScript IDE最好用？
阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充
异步编程之Javascript Promises 规范介绍
Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。
超越Web，Javascript在物联网的应用
引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨
JavaScript 常用功能总结
小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面
微软Edge 内嵌的JavaScript 引擎即将开源
微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。
TypeScript VS JavaScript 深度对比
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？
2017年 JavaScript 框架回顾 -- 后端框架
本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
前端开发者常用的9个JavaScript图表库
对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS
一张图告诉你最流行的 7 个 JavaScript框架特点
AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基
1分钟选好最合适你的JavaScript框架
Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如
2017年 JavaScript 框架回顾 -- 前端框架
对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。
SpreadJS使用进阶指南
前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。
ES2017异步函数现已正式可用
ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。
Top 10 JavaScript编辑器，你在用哪个？
本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。
JavaScript中的内存泄漏以及如何处理
随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。
JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot