what does bind(this) means?

Question

I already know that what bind do, it bound your given object or function to the function you want, but bind(this) is really confusing me.What does this

Answer 1

You can play nice with this inside forEach - according to the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach - instead of binding pass this as second argument for forEach statement.

class App extends React.Component {
    constructor() {
      super();
      this.state = {
        data: [{
          "userId": 1,
          "id": 1,
          "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        }]
      }
    }

    componentDidMount() {
      this.state.data.forEach(function(item) {
        console.log('outer scope ', this);
      }, this) // be nice for context - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
    }

    render() {
      return ( <div> Hello < /div>)
    }
}

ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

Answer 2

You didn't show full React component definition, but it most probably refers to React component instance where your componentWillMount is defined.

Answer 3

bind(this) here binds the context of your function inside forEach() to the scope of the componentWillMount().

this here refers to the the scope of componentWillMount().

With bind(this), this keyword inside the inner function will refer to the outer scope. This is essential because in this case this.setState inside the forEach function can be called as its scope is limited to componentWillMount().

According to the docs:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Check out this demo which illustrates the usage of bind(this).

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      data: [{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }]  
    }
  }
  componentDidMount() {
    this.state.data.forEach(function(item) {
      console.log('outer scope ', this);
    }.bind(this))
     this.state.data.forEach(function(item) {
      console.log('Inner scope ', this);
    })
  }
  render() {
    return (
    <div>Hello</div>)
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>