title: How to override class arrow function method
body: <p>I know this is something simple but I can't seem to find an answer to my question.</p>
  
  <p>Many references that if you have the same function name only the last instance of the function will be called when the function is called (override).</p>
  
  <p>I can't seem to do this if the function is an arrow function.</p>
  
  <p>Normal function behavior:</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 A {
    constructor() {
      this.something();
    }
  
    something() {
      console.log('I am A');
    }
  }
  
  class B extends A {
    something() {
      console.log('I am B');
    }
  }
  
  let b = new B();</code></pre>
  </div>
  </div>
  </p>
  
  <p>This does overrides the <code>something()</code> function in <code>class A</code> but I can't seem to override function <code>something()</code> if it is in an arrow function format.</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 A {
    constructor() {
      this.something();
    }
  
    something = () =&gt; {
      console.log('I am A');
    }
  }
  
  class B extends A {
    something = () =&gt; {
      console.log('I am B');
    }
  }
  
  let b = new B();</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is the output of the two are different? How can I override the arrow function in the parent class correctly?</p>