javascript - 關於react裡的一個疑問

Question

下面是一段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
);

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指的是什麼。