title: javascript 'this' in ES6 classes return undefined
body: <p>I think this is a scope problem, but I'm not sure how to fix this. 
  Here is my code: <a href="http://jsfiddle.net/9k9Pe/1498/" rel="noreferrer">http://jsfiddle.net/9k9Pe/1498/</a></p>
  
  <pre><code>class FrameCreator{
  
      constructor(){
          this.createFrame();
      }
      createFrame(){
        var iframe = document.createElement('iframe');
        this.iframe = iframe;
        var frameLoaded=this.frameLoaded;
        iframe.onload = function () {
                      frameLoaded();
        };
        document.body.appendChild(iframe);
      }
      frameLoaded(){
              console.log("frame loaded");
      }
  }
  
  class CustomFrameCreator extends FrameCreator{
      addContent(){
              console.log(this); // returns the object
      }
      frameLoaded(){
              console.log(this); // returns undefined
      }
  }
  
  var frame=new CustomFrameCreator();
  frame.addContent();
  </code></pre>
  
  <p><code>frameLoaded()</code> prints undefined, while <code>addContent</code> prints the object.</p>
  
  <p>How to fix this, so I can have a reference in this when frame is loaded?</p>
  
  <p>Thanks</p>