10 种 JavaScript 最常见的错误 _JavaScript

前言看了数千个项目后，发现了 10 个最常见的 JAVAScript 错误。我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱” ，你将会成为一个更好的开发者。

文章插图

一、Uncaught TypeError: Cannot read property如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 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 是 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 中轻松测试。这与第一点中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

文章插图

3、 TypeError: null is not an object这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。

文章插图
【10 种 JavaScript 最常见的错误】
有趣的是，在 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=https://www.isolves.com/it/cxkf/yy/js/2019-12-06/"Go" />