title: How does event handlers with arrow functions achieve context binding
body: <p>I know about the general theory of <code>this</code> binding (function call site what matters, implicit, explicit binding, etc...) and the methods to solving the problem of this binding in React so it always points to what I want <code>this</code> to be (binding in constructor, arrow functions, etc), but I am struggling to get the inner mechanisms.</p>
  
  <p>Take a look at these two pieces of code:</p>
  
  <pre><code>class demo extends React.component {
    goToStore(event) {
      console.log(this)
    }
  
    render() {
      &lt;button onClick={(e) =&gt; this.goToStore(e)}&gt;test&lt;/button&gt;
    }
  }
  </code></pre>
  
  <p>vs.</p>
  
  <pre><code>class demo extends React.component {
    goToStore(event) {
      console.log(this)
    }
  
    render() {
      &lt;button onClick={this.goToStore}&gt;test&lt;/button&gt;
    }
  }
  </code></pre>
  
  <p>What I know is that:</p>
  
  <ul>
  <li>in both versions we end up successfully in the goToStore method, because the <code>this</code> inside the <code>render()</code> method is automatically bound (by React) to the component instance</li>
  <li>the first one succeeds because of that,</li>
  <li>the second one fails, because class methods in es6 are not bound to the component instance, thus resolving <code>this</code> in the method to <code>undefined</code></li>
  </ul>
  
  <p>In theory in the first version as far as I understand, the following occurs:</p>
  
  <ol>
  <li>the button click handler is an anonymous <strong>arrow</strong> function, so whenever I reference <code>this</code> inside of it, it picks up <code>this</code> from the environment (in this case from <code>render()</code>)</li>
  <li>then it calls the <code>goToStore</code> method, that is a regular function.</li>
  <li>because the call seems to fit the rules of implicit binding (<code>object.function()</code>) <code>object</code> will be the context object and in such function calls it will be used as <code>this</code></li>
  <li>so, inside the <code>goToStore</code> method the lexically picked up this (used as a context object) will resolve to the component instance correctly</li>
  </ol>
  
  <p>I feel 3. and 4. is not the case here, because then it would apply to the 2. case:</p>
  
  <pre><code>&lt;button onClick={this.goToStore}&gt;test&lt;/button&gt;
  </code></pre>
  
  <p>Also with <code>this</code> the context object.</p>
  
  <p>What is happening exactly in this particular case, step-by-step?</p>