参见英文答案 >
How to access the correct `this` inside a callback?8个
我认为这是一个范围问题,但我不知道如何解决这个问题.
这是我的代码： http://jsfiddle.net/9k9Pe/1498/
我认为这是一个范围问题,但我不知道如何解决这个问题.
这是我的代码： 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();
