javascript 'this' w klasach ES6 zwraca undefined

Question

Myślę, że jest to problem z zasięgiem, ale nie jestem pewien, jak to naprawić. Oto mój kod: 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() drukuje niezdefiniowany, podczas addContent wydruków przedmiot.

Jak to naprawić, więc mogę mieć odwołanie w tej sytuacji po załadowaniu ramki?

Dzięki

Answer 1

Innym alternatywnym do .bind() jest użycie ES6 Strzałka funkcję zachowania kontekstu:

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 2

Zastosowanie bind funkcja związać kontekst

this.frameLoaded.bind(this); 

Zobacz fiddle

Answer 3

Trzeba powiązać obsługi dla onload

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

Answer 4

Skoro tworzenia nowego zakresu, this obrębie onload zwrotnego nie odwołać swoją klasę, to zamiast referencji sama funkcja oddzwaniania. Musisz bind swój sposób frameLoaded do właściwego thisArg.

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