javascript 'this' in ES6 classes return undefined

Question

I think this is a scope problem, but I'm not sure how to fix this. Here is my code: 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() prints undefined, while addContent prints the object.

How to fix this, so I can have a reference in this when frame is loaded?

Thanks

`var frameLoaded=this.frameLoaded;` don't do that, for starters. or at least bind it. — Kevin B, Jul 08 '16 at 18:21
It's not clear which `frameLoaded` method you want to run at `iframe.onload`, and with which `this` value. — Oriol, Jul 08 '16 at 18:24

score 15 · Accepted Answer · answered Jul 08 '16 at 18:25

15

Another alternative to .bind() is to use ES6 Arrow function to preserve context:

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

answered Jul 08 '16 at 18:25

Patrick Roberts

49,224
10
102
153

This creates a function that calls the function. I suspect it is not as efficient as bind. Not sure though. – frodeborli Aug 23 '17 at 18:31
@frodeborli `bind()` wraps the function internally, anyway, this is how you would implement the polyfill. The part that makes it less efficient is actually the scoped reference to `this`, which kills some JavaScript optimization potential on the function scope, so you're partially correct, but for the wrong reason. – Patrick Roberts Aug 23 '17 at 18:37

score 7 · Answer 2 · answered Jul 08 '16 at 18:21

7

Use bind function to bind context

this.frameLoaded.bind(this);

See fiddle

answered Jul 08 '16 at 18:21

Max Brodin

3,903
1
14
23

score 1 · Answer 3 · answered Jul 08 '16 at 18:21

1

You need to bind the handler for onload

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

answered Jul 08 '16 at 18:21

Daniel A. White

187,200
47
362
445

score 0 · Answer 4 · answered Jul 08 '16 at 18:27

Since you're creating a new scope, this within the onload callback does not reference your class, it instead references the callback function itself. You must bind your frameLoaded method to the proper 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' in ES6 classes return undefined

4 Answers4