javascript ES6 sınıflarında 'this' döndürüyor undefined

Question

Bunun bir kapsam sorunu olduğunu düşünüyorum, ancak bunu nasıl düzelteceğimi bilmiyorum. addContent baskılar ise nesne, 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() baskılar tanımsız: İşte benim kodudur.

Bunu nasıl düzeltebilirim, böylece çerçeve yüklendiğinde bu konuda bir referans alabilir miyim?

Teşekkür

Answer 1

başka alternatif için işleyici bağlamak gerekir fiddle

Answer 2

Kullanım bind fonksiyon bağlam

this.frameLoaded.bind(this); 

Sen onload

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

Answer 3

Bkz bağlamak

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

Eğer sınıfını başvuru yapmıyor onload callback'inde içinde yeni kapsam, this oluşturduğunuz için, bunun yerine referansları:bağlam korumak için ES6 Ok işlevini kullanmaktır geri arama işlevi kendisi. Doğru buArg için bindframeLoaded yöntemini kullanmalısınız.