Javascript – Eine Frage zur Reaktion

Question

Das Folgende ist ein einfacher dynamischer Effekt, der in React geschrieben wurde, einige Teile sind jedoch unklar. Warum müssen wir bind(this) am Ende des Timers hinzufügen? Welche Funktion hat es? Mir fehlt ein Wissen, das mich über das Hinzufügen von bind(this) unklar macht?

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

Answer 1

两个知识点：

• bind()

• this 指向

具体到这个例子，如果不使用bind()而直接调用 setInterval 中定义的匿名函数，函数内部的 this 是指向 window 对象的。匿名函数内部显然需要 this 指向当前组件，才能读取state属性/调用setState()方法，所以使用bind()为匿名函数绑定当前执行环境的 this，即当前组件。

Answer 2

你只要分清下面几个this就知道了。

1.bind(this)这个this指的是什么。
2.不bind(this)时，回调执行时，函数里的this指的是什么。
3.bind(this)之后，回调执行时，函数里的this指的是什么。