title: jQuery getJSON losing this context in child class on callback
body: <p>I am losing 'this' context in the child class when using getJSON to retrieve some JSON when using a callback from the parent class. I solve this by doing self = this and then passing the self variable but it seems incorrect and not the correct way of achieving this. </p>
  
  <p>I know the code is formatted incorrectly but I do not know how to fix it. </p>
  
  <p>I have tried arrow functions but I still seem to not get the 'this' context.</p>
  
  <pre><code>class RadioPlayer extends Radio{ 
  
      constructor(xProvider) {
          super(xProvider);
      }
  
      retrieveStations(xStationsCallback) {
        this.xStationsCallback = xStationsCallback;
        let url = 'stations.json';
        this.getFromPoint(this.radioPlayerCallback, url);
      }
  
      //Self = this;
      radioPlayerCallback(xData, self){
        self.stations = xData;
        self.xStationsCallback();
      }
  }
  class Radio{
      constructor(xProvider) {
          // if (new.target === TwineRadio) {
          //   throw new TypeError("Cannot construct TwineRadio instances directly");
          // }
          this.provider = xProvider;
          this.stations = null;
      }
  
      getFromPoint(xRadioPlayerCallback, url){
        //Ensure reference to this is passed to the child as it loses focus
        let self = this;
        $.getJSON(
        url, function(data){
          xRadioPlayerCallback(data, self);
        });
      }
  
      getStations(){
          return this.stations;
      }
  
      getProvider(){
          return this.provider;
      }
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Radio API prototype&lt;/title&gt;
      &lt;script src="Radio.js"&gt;&lt;/script&gt;
      &lt;script src="RadioPlayer.js"&gt;&lt;/script&gt;
      &lt;script
          src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  function StationsCallback(){
      console.log(RadioPlayer.stations);
  }
  
  RadioPlayer = new RadioPlayer("RadioPlayer");
  RadioPlayer.retrieveStations(StationsCallback);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code provided works by creating a new variable that referencing self and then passing it to the callback function but then I have to use the self variable instead of this which seems difficult to manage. The classes are in different files.</p>