javascript 'this' 在 ES6 中类 return 未定义

Question

我认为这是一个范围问题，但我不确定如何解决这个问题。这是我的代码：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() 打印未定义，而 addContent 打印对象。

如何解决这个问题，以便我在加载框架时可以在此参考？

谢谢

Answer 1

使用bind函数绑定上下文

this.frameLoaded.bind(this);

见fiddle

Answer 2

您需要为 onload

绑定处理程序

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

Answer 3

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

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 不会引用您的 class，而是引用回调函数本身。您必须 bind 您的 frameLoaded 方法到正确的 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();

javascript 'this' 在 ES6 中类 return 未定义

javascript 'this' in ES6 classes return undefined

javascript

ecmascript-6

es6-class

javascript 'this' 在 ES6 中 类 return 未定义

javascript 'this' in ES6 classes return undefined

javascript

ecmascript-6

es6-class

javascript 'this' 在 ES6 中类 return 未定义