下面是一段react写的简单动态效果，但是有分地方不清楚。在定时器里的结尾为什么要加bind(this),它的作用是什么，我缺了那一块的知识点导致我不清楚要加bind(this)的？
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<p style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</p>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
两个知识点：
bind()
this 指向
具体到这个例子，如果不使用
bind()而直接调用 setInterval 中定义的匿名函数，函数内部的 this 是指向 window 对象的。匿名函数内部显然需要 this 指向当前组件，才能读取state属性/调用setState()方法，所以使用bind()为匿名函数绑定当前执行环境的 this，即当前组件。你只要分清下面几个this就知道了。
1.bind(this)这个this指的是什么。
2.不bind(this)时，回调执行时，函数里的this指的是什么。
3.bind(this)之后，回调执行时，函数里的this指的是什么。