title: Classes and arrow functions and THIS
body: <p>While learning JS and React I've come across confusing differences in tutorials. </p>
  
  <p>I'll split the questions below with examples. I understand bind for regular functions and this context, it's just arrow functions and how I've seen them used/declared that's confusing.</p>
  
  <p>Please don't just refer to duplicates as I've found conflicting answers in tutorials which have confused me, so looking for the source of truth to understand in a simple way. Answers related to the questions and examples below would help better.</p>
  
  <p>1 - I've seen examples where a tutorial says the value of 'this' would be window as the arrow function inherits from the global/window scope but I've also seen tutorials where they say it will inherit this from the class context - which is correct? if you could please explain.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MyClass {
      value = 'Hello World!'
      clickHandler = () =&gt; { console.log(this.value) };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>2 - I have 2 parts to this question -
  i - Why is the syntax clickHandler = () => rather than clickHandler () =></p>
  
  <p>I ask this because I read class methods can be defined with 'functionName () {}' so why do arrow functions treat the method name as a variable?</p>
  
  <p>ii - What is the value of this in the below code? same as question 1 I guess, does this refer to the window object or the class? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Foo extends React.Component {
    constructor() {
    }
    clickhandler = () =&gt; {
      console.log("you clicked me!!")
    }
    render() {
      return( 
      &lt;div&gt;
        &lt;button onClick={this.clickhandler}&gt; // =&gt; CALLBACK</code></pre>
  </div>
  </div>
  </p>
  
  <p>3 - Here I see the event handler is an inline function, but it looks like it gets invoked because of the () at the end, sometimes as in the follow on snippet, you can see that just the function name is given without the parentheses, shouldn't they be there also?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MyComponent extends React.Component {
    showValue() {
      console.log(this.props.value);
    }
  
    render() {
      return (
        &lt;button onClick={() =&gt; this.showValue()}&gt;Do Something&lt;/button&gt;
      );
    }
  }
  
  -------------------------------------------
  
  showValue() {
      console.log(this.props.value);
    }
  
    render() {
      return (
        &lt;button onClick={this.showValue}&gt;Do Something&lt;/button&gt;
      );
    }</code></pre>
  </div>
  </div>
  </p>