setInterval中this

  今天使用react做钟表,自然用到了setInterval,但是出现this指向不明的问题。

 <html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
} componentWillUnmount() {
clearInterval(this.timerID);
} tick() {
this.setState({
date: new Date()
});
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script> </body>
</html>

  在componentDidMount中setInterval使用了ES6的箭头函数,有建议可以使用ES6以前的函数是这样

 let that = this;
this.timerID = setInterval(function () {
return that.tick();
},1000);

  这样使可以的,但是过于繁琐,观察了一下,setInterval第一个参数不就是传一个函数就行嘛,干嘛这么费劲,于是我这样写

 this.timerID = setInterval(
this.tick,
1000);

  结果报错了

setInterval中this

  什么?找不到setState,那就是this不对啊,果然setInterval中第一个参数若果是一个裸函数的话,函数中this指向的是window。

  于是改为

 this.timerID = setInterval(
this.tick.bind(this),
1000);

  完美运行!

上一篇:转: seajs手册与文档之 -- require规则


下一篇:事件类型(js)