Custom this when calling functions in JavaScript [duplicate]

Question

Here's what I have so far: http://jsfiddle.net/nxCFn/

var il = new ImageLoader();

function ImageLoader() {
    this.n = 2;

    this.load = function() {
        //obviously, the this = the image and not the original instance of ImageLoader :(
        this.n++;
        console.log(this.n);
    }

    this.imgnam = "http://www.google.com/images/errors/logo_sm.gif";

    this.img = new Image();
    this.img.src = this.imgnam;
    this.img.onload = this.load;
}

Because the image is calling .load() this from load points to the image. I want to make this from load point to the ImageLoader instance it "belongs" to.

Brett Zamir · Accepted Answer · 2012-09-08 14:31:44Z

1

var that = this;
this.img.onload = function () { that.load();}

answered Sep 8, 2012 at 14:31

Brett Zamir

14.4k7 gold badges57 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2012-09-08 14:31:27Z

1

Copy the this reference to a local variable, and make the event handler an anonymous function so that the local variable is caught in the closure for the function:

var that = this;

this.img.onload = function() { that.load() };

answered Sep 8, 2012 at 14:31

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

gray state is coming · Accepted Answer · 2012-09-08 14:40:19Z

1

Use Function.prototype.bind

this.img.onload = this.load.bind(this);

Or you can use it right here since you make a new function for each instance.

this.load = function() {
    this.n++;
    console.log(this.n);
}.bind(this);


this.img.onload = this.load;

To support old browsers, you can make your own binder function instead.

function _binder(func, ctx /*, arg1, argn */) {
    var _slice = Array.prototype.slice,
        bound_args = _slice.call(arguments, 2);
    return function() {
        return func.apply(ctx, bound_args.concat(_slice.call(arguments)));
    }
}

Then do this.

this.img.onload = _binder(this.load, this);

edited Sep 8, 2012 at 14:40

answered Sep 8, 2012 at 14:33

gray state is coming

2,11711 silver badges20 bronze badges

2 Comments

Guffa Over a year ago

Note: The bind method is only supported in recent browsers (e.g. IE 9+). developer.mozilla.org/en-US/docs/JavaScript/Reference/…

gray state is coming Over a year ago

@Guffa: Noted. Already added a solution for legacy browsers.

Collectives™ on Stack Overflow

Custom this when calling functions in JavaScript [duplicate]

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related