参见英文答案 >
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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。