10 种最常见的 Javascript 错误 — 总结于 1000+ 个项目，并阐述如何避免 - Web前端

资讯频道 → Web前端

0顶
0踩

10 种最常见的 Javascript 错误 — 总结于 1000+ 个项目，并阐述如何避免

2018-02-11 13:48 by 副主编 jihong10102006 评论(0) 有9098人浏览

javascript

引用

原文地址：https://rollbar.com/blog/top-10-javascript-errors/
更多文章参见： https://github.com/elevenbeans/elevenbeans.github.io

为了回馈我们的开发者社区，我们查看了数千个项目的数据库，发现了 JavaScript 中频度最高的 10 种错误。我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”，你将会成为一个更好的开发者。

数据才是王道，我们收集并分析了出现频次排前 10 的 JavaScript 错误。 Rollbar 会收集每个项目的所有错误，并总结每个错误发生的次数。我们通过根据 “指纹”（rollbar 用到的一种算法，详见：https://rollbar.com/docs/grouping-algorithm/）对错误进行分组。基本上，如果第二个错误只是第一个错误的重复，我们会把两个错误分到同一组。这会给用户一个很好的概括，而不是像在日志文件中看到的那样直接一大堆让人感觉到十分压迫的 dump。

我们专注于最有可能影响您和您的用户的错误。为此，我们通过研究各种不同公司的项目集来对于错误进行排列。如果我们只查看每个错误发生的总次数，那么客户量大的的项目产生的错误可能会压倒其他错误，导致实际收集到的是与大多数读者无关的错误数据集。

以下是 JavaScript 错误 Top 10：

为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。

1. Uncaught TypeError: Cannot read property

如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。

我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

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>
    );
  }
}

这里有两件重要的事情要实现：

组件的状态（例如 this.state）从 undefined 开始。
当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。

这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

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

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。这与 1 中提到的 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 元素，则会出现此错误。

在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。一旦 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 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。

要获得真正的错误消息，请执行以下操作：

1. 发送 ‘Access-Control-Allow-Origin’ 头部

将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。在这里看到更多。

这里有一些关于如何在各种环境中设置这个头文件的例子：
Apache

在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：

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

Nginx

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

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

HAProxy

将以下内容添加到您为 JavaScript 文件提供资源服务的后端：

rspadd Access-Control-Allow-Origin:\ *

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

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 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 l浏览器的常见的问题。在这种情况下，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 开发人员控制台中进行测试。

随着 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 在一些情况下会发生的错误。一个是当你调用一个不终止的递归函数。您可以在 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 中发生的错误，因为读取未定义变量的长度属性。您可以在 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，我们不能获取或设置任何未定义的属性。在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。

例如，在 Chrome 浏览器中：

如果测试对象不存在，错误将会抛出 “Uncaught TypeErrorUncaught TypeError: Cannot set property”。

10. ReferenceError: event is not defined

当您尝试访问未定义的变量或超出当前范围的变量时，会引发此错误。您可以在 Chrome 浏览器中轻松测试。

如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。像 IE 这样的旧浏览器提供了一个全局变量事件，但并不是所有浏览器都支持。像 jQuery 这样的库试图规范化这种行为。尽管如此，最好使用传入事件处理函数的函数。

function myFunction(event) {
    event = event.which || event.keyCode;
    if(event.keyCode===13){
       alert(event.keyCode);
    }
}

结论

我们希望你学到了新的东西，可以避免将来的错误，或者本指南帮助你解决了头痛的问题。

尽管如此，即使有最佳实践，生产中也会出现意想不到的错误。能够查看影响用户的错误，并拥有快速解决问题的好工具，这一点非常重要。

查看图片附件

来自: Elevenbeans' blog

分享到：

0
顶

0
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

JavaScript的工作原理：内存管理+如何处理4个常见的内存泄漏

本篇译文，删减了原文中一些无关紧要的内容，可以让大家花更少的阅读时间。原文地址：...这篇文章将讨论日常编程中另一个复杂且容易被忽视的问题 — 内存管理。其中还提供...

JavaScript 工作原理（一）——内存管理与四种常见内存泄漏的处理方法

几周前，我们新开了一系列文章，旨在深入 JavaScript，探寻其工作原理。我们认为通过了解 JavaScript 的构建方式和其运行规则，我们能写出更好的代码和应用。第一篇文章重点介绍了引擎、运行时和调用栈的概述。...

【前端面试题】03—200+道常见JavaScript基础面试题上（附答案）

JavaScript一直都是前端面试的重头戏，也是最核心的部分。JavaScript也是囊括知识点最多的部分，从BOM到DOM，从 ECMAScript编程到简单算法的实现等，都是 Jav...

【前端面试题】03—200+道常见JavaScript基础面试题上

JavaScript一直都是前端面试的重头戏，也是最核心的部分。 JavaScript也是囊括知识点最多的部分，从BOM到DOM，从 ECMAScript编程到简单算法的实现等，都是 JavaScript部分面试题主要考察的内容。当然，这里的重中...

200+道常见JavaScript基础面试题上（附答案）

【前端面试题】200+道常见JavaScript基础面试题上（附答案） JavaScript一直都是前端面试的重头戏，也是最核心的部分。 JavaScript也是囊括知识点最多的部分，从BOM到DOM，从 ECMAScript编程到简单算法的实现等，都...

手把手带你学习 JavaScript 的 ES6 ~ ESn

主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、...

JavaScript使用微前端的 5 个陷阱以及如何避免它们

在两年的时间里，我们发现了这个架构的许多问题，并犯了同样多的错误。因此，是时候分享它们以帮助您解决或避免它们了。让我们首先回顾一下微前端架构是什么，然后深入了解它们的陷阱以及如何避免它们中的每一个。...

Javascript 程序员需要知道的5个知识点

Javascript 程序员需要知道的5个知识点 1. 原始值: 在 JavaScript 中，原始值或原始类型是一种不是对象且没有方法的数据。有 7 种原始数据类型/值，它们分别是: Undefined (undefined), 无意中丢失的值或未定义...

C/C++学习路线总结与分享

vue 使用原生canvas_Vue + Canvas项目总结

需要在电脑上看哦,而且最好用Chrome打开引言这是今年三月份帮学长做的一个项目，陪我度过了两个月的春招生活，整个项目做下来也是学到了很多东西，下面就开始我的分享啦，包括一些知识点总结和遇到的坑，dalao莫笑哈...

常见JavaScript基础面试题上（附答案）

常见JavaScript基础面试题上（附答案） 1、JavaScript有哪些垃圾回收机制？有以下垃圾回收机制。标记清除（ mark and sweep）这是 JavaScript最常见的垃圾回收方式。当变量进入执行环境的时候，比如在函数中声明...

200+道JavaScript基础面试题（上）

这是JavaScr i pt 最常见的垃圾回收方式。当变量进入执行环境的时候，比如在函数中声明一个变量，垃圾回收器将其标记为“进入环境” 。当变量离开环境的时候（函数执行结束），将其标记为“离开环境”。垃圾回收...

03—200+道常见JavaScript基础面试题上（附答案）

你不知道的JavaScript--Item10 闭包（closure）

也犯过几次因为不理解闭包导致的错误，一年多了资料也看了一些，但还是不是非常明白，最近偶然看了一下 jQuery基础教程的附录，发现附录A对JavaScript的闭包的介绍简单易懂，于是借花献佛总结一下。1、定义闭包：是...

2019年最全面最新200+道JavaScript基础面试题（上）

在此之前，我也跟大家分享过很多的面试题，今天我要跟大家分享的这个JavaScript的面试一共有200多道，适用于前端学习与前端求职者，面试刷题，里面涵盖的内容比较广，今天只是整理了部分面试题，希望对你们有所帮助 ...

10 大常见的web开发错误

现在的开发环境也足够智能，可以帮我们发现并修复很多错误。甚至有很多不同的开发平台提供方便的将静态页面转换为高度可交互的应用的功能。　所有的这些开发模式、时间和平台都有共同点，并且容易犯相似

常见乱码问题分析和总结

夏怀英和 David Chen2018 年 1 月 17 日发布在我们的日常工作生活中一定碰到过... 安装程序中的乱码场景 2：打开一个文档发现里面的内容全面是问号？？？？？？如图 2 所示；图 2. 带有问号的乱码场景 3：打开某...

[js点滴(转)]JavaScript中的this陷阱的最全收集--没有之一

有句话这么说：如果你不能向一个6岁小孩解释清楚一个东西，那么你自己也不懂这个东西。这句话或许有点夸张，但是极其有道理。个人觉得，如果需要掌握一门语言，掌握它的API只是学了皮毛，理解这门语言的精髓才是重点...

人力资源经理绩效考核表.xls

人力资源经理绩效考核表

智慧环卫管理平台建设方案Word(211页).docx

一、智慧环卫管理平台的建设背景与目标智慧环卫管理平台的建设源于对环卫管理全面升级的需求。当前，城管局已拥有139辆配备车载GPS系统、摄像头和油耗传感器的环卫车辆，但环卫人员尚未配备智能移动终端，公厕也缺乏信息化系统和智能终端设备。为了提升环卫作业效率、实现精细化管理并节省开支，智慧环卫管理平台应运而生。该平台旨在通过信息化技术和软硬件设备，如车载智能终端和环卫手机App，实时了解环卫人员、车辆的工作状态、信息和历史记录，使环卫作业管理透明化、精细化。同时，平台还期望通过数据模型搭建和数据研读，实现更合理的环卫动态资源配置，为环卫工作的科学、健康、持续发展提供决策支持。二、智慧环卫管理平台的建设内容与功能智慧环卫管理平台的建设内容包括运行机制体制建设、业务流程设计、智慧公厕系统建设、网络建设、主机和储存平台需求、平台运维管理体系、硬件标准规范体系以及考核评价体系等多个方面。其中，智慧公厕系统建设尤为关键，它能实时监控公厕运行状态，保障公厕的清洁和正常运行。平台建设还充分利用了现有的电子政务网络资源，并考虑了有线和无线网络的需求。在功能上，平台通过普查、整合等手段全面收集环卫车辆、企业、人员、设施、设备等数据，建立智慧环卫基础数据库。利用智能传感、卫星定位等技术实现环卫作业的在线监管和远程监控，实现对道路、公共场所等的作业状况和卫生状况的全面监管。此外，平台还建立了环卫作业网格化管理责任机制，实现从作业过程到结果的全面监管，科学评价区域、部门、单位和人员的作业效果。三、智慧环卫管理平台的效益与风险规避智慧环卫管理平台的建设将带来显著的环境、经济和管理效益。环境方面，它将有力推进环境卫生监管服务工作，改善环境卫生状况，为人民群众创造更加清洁、卫生的工作和生活环境。经济方面，通过智慧化监管，大大降低了传统管理手段的成本，提高了监管的准确性和效率。管理方面，平台能够追踪溯源市民反映的问题，如公厕异味、渣土车辆抛洒等，并找到相应的责任单位进行处置，防止类似事件再次发生。同时，平台还拥有强大的预警机制功能，能够在很多环卫问题尚未出现前进行处置。然而，平台建设也面临一定的风险，如部门协调、配合问题，建设单位选择风险以及不可预测的自然灾害等。为了规避这些风险，需要加强领导、统一思想，选择优秀的系统集成商承接项目建设，并做好计算机和应用系统的培训工作。同时，也要注意标准制定工作和相关法律法规的制定工作，以保证系统建设完成后能够真正为环卫管理工作带来便利。

0顶0踩

10 种最常见的 Javascript 错误 — 总结于 1000+ 个项目，并阐述如何避免

发表评论

相关推荐

0顶
0踩