10个最常见的JavaScript错误[译]

前言

翻译自原文，省去了原文的开头和结尾，只翻译中间的主要内容——介绍10个最常见的js错误，并如何避免这些陷阱。部分地方是我在翻译时，根据自己的理解加上的标注或一些延展性的内容。
这里是10大JavaScript错误：
为了可读性，上面错误的描述都是缩写后的。接下来会深入探讨一下，这些错误发生的原理，并且如何避免触发他们。
1. Uncaught TypeError: Cannot read property
如果你是一个JavaScript开发人员，可能你看到这个错误的次数，比你希望承认的次数还要多。当你在一个未定义undefined的对象上读取一个属性或调用一个方法时，这个错误就会在chrome里触发(当然在其他浏览器中也会报错，但是错误信息不是这样描述的)。在chrome开发者控制台console里，可以测试这个错误：
这个错误出现的原因有很多，最常见的一种场景是：当使用UI组件进行渲染时，声明state不正确。让我们来看下下面这段在真实app中的示例代码片段。我们选取的react的代码，但是同理这种不恰当的声明在vue、Angular或其他框架中也会出现。
```
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. 一个组件的state(比如上面的this.state)在组件生命周期开始时是未声明的，为undefined。
2. 当你异步获取数据时，组件在获取到数据之前，无论你获取数据的代码是写在constructor方法，还是componentWillMount或者componentDidMount的生命周期里，至少都会调用一次render方法渲染模板。上面的示例代码运行第一次render的时候，this.state.items为undefined。这意味着本该是ItemList的值，却为undefined，接着你就会在console里看到一个错误”Uncaught TypeError: Cannot read property ‘map’ of undefined“

这个问题修复起来也很简单。最简单的方法：在constructor里初始化时用恰当的默认值赋值给state。

class Quiz extends Component {
// 在这里添加:
constructor(props) {
super(props);

// 声明state本身，并给他的属性都设置上一个默认值
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>
);
}
}

在你的app中的具体代码可能和上面有区别，但我们还是希望这会给你足够多的线索去修复或避免这个错误。如果没能帮到你，请继续阅读下面的更多例子以及相关的错误。
2.TypeError: ‘undefined’ is not an object (evaluating
当你在一个未定义undefined的对象上读取一个属性或调用一个方法时，在safari里就会报这个错。你可以再Safari的console控制台里测试这个错误，本质上和上面那个在chrome中出现错误是一样的，只是在Safari用里的错误信息有区别。
3. TypeError: null is not an object (evaluating
当你去读取一个null对象的属性或调用方法时，会在Safari里出现这个错误。可以在Safari 控制台里测试这个错误。
有趣的是，在JavaScript中的null和undefined是不相等的，所以我们才会得到不同的错误信息。Undefined通常是指一个变量没有被声明，而null表示一个变量的值为空。使用严格相等操作符可以证实他们是不相等的。
在实际项目中有一种出现这种错误的场景：当你在js中想要操作一个dom元素，但这个元素还没加载或者不存在时。这是因为dom的API会在你查找dom元素的结果为空的情况下返回null。
任何处理dom元素的代码必须要放在dom元素被创建完毕之后。JS代码正如HTML中一样，是从上而下执行的。所以，如果你在html代码里的dom元素之前使用了一个JavaScript标签，并在里面包含了一些内联的js代码，那么这些js代码会在html页面解析之前执行。这时可能就会出现这个错误，因为在加载js代码之前，dom元素还没有被创建好。

在这种情况下，我们可以通过添加一个监听页面是否解析完毕的事件监听来解决问题。一但事件监听器触发，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>


#### 译者注：
* 上面说的这个问题，是因为在html中所有资源的加载都是从上而下**同步**加载的，所以以前的代码规范都会有一句：”在html里css标签放上面，js标签放下面“；包括比如jQuery里的ready方法，这些做法都是为了保证js代码执行的时候，页面上的dom元素都是创建好了的。
* 这里我再介绍一下defer和async，在外链引入js文件的情况，可以在script标签上加上defer或async修饰符，使该**js能够异步加载**，从而解决上面遇到的问题。async表示**后续的解析任务和当前js标签的加载任务并行执行**，defer表示**该js标签的代码会在所有页面元素解析完成之后，DOMContentLoaded 事件触发之前执行**。两者具体区别参考：[https://segmentfault.com/q/1010000000640869](https://segmentfault.com/q/1010000000640869)
#### 4. (unknown): Script error
*

TokenYangForever / NewProject

10个最常见的JavaScript错误[译] #21

前言

这里是10大JavaScript错误：

1. Uncaught TypeError: Cannot read property

2.TypeError: ‘undefined’ is not an object (evaluating

3. TypeError: null is not an object (evaluating