ES6类中的javascript’the’返回undefined

参见英文答案 > How to access the correct `this` inside a callback?8个
我认为这是一个范围问题,但我不知道如何解决这个问题.
这是我的代码： 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()打印undefined,而addContent打印对象.

如何解决这个问题,所以我可以在加载框架时有一个参考？

谢谢

解决方法

.bind()的另一个替代方法是使用ES6 Arrow函数来保留上下文：

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

ES6类中的javascript’the’返回undefined

解决方法

猜你在找的JavaScript相关文章