javascript ES6クラスの「this」は未定義です

Question

これはスコープの問題だと思いますが、これを修正する方法がわかりません。 addContentプリントしばらくオブジェクト、http://jsfiddle.net/9k9Pe/1498/

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(); 

frameLoaded()プリント未定義： はここに私のコードです。

これを修正するには、フレームがロードされたときにこれを参照することができますか？

おかげ

Answer 1

の別の代替のためのハンドラをバインドする必要がfiddle

Answer 2

使用bind機能は、コンテキスト

this.frameLoaded.bind(this); 

あなたはonload

iframe.onload = function() { 
    this.frameLoaded(); 
}.bind(this); 

Answer 3

を参照してください。バインドします

iframe.onload =() => { 
    this.frameLoaded(); 
}; 

class FrameCreator { 
 
    constructor() { 
 
    this.createFrame(); 
 
    } 
 
    
 
    createFrame() { 
 
    var iframe = document.createElement('iframe'); 
 
    this.iframe = iframe; 
 
    
 
    iframe.onload =() => { 
 
     this.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 the object now 
 
    } 
 
} 
 

 
var frame = new CustomFrameCreator(); 
 
frame.addContent();

Answer 4

あなたのクラスを参照していませんonloadコールバック内に新しいスコープ、thisを作成しているので、代わりに参照：は、コンテキストを維持するためにES6アロー機能を使用することですコールバック関数自体。あなたは適切なthisArgのbindframeLoadedメソッドを必要とします。

class FrameCreator { 
 

 
    constructor() { 
 
    this.createFrame(); 
 
    } 
 
    createFrame() { 
 
    var iframe = document.createElement('iframe'); 
 
    this.iframe = iframe; 
 
    var frameLoaded = this.frameLoaded; 
 
    iframe.onload = frameLoaded.bind(this) 
 
    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();