JavaScript - Can I get the parent object of a method?

Question

I was wondering whether I could get the parent object of a method - something like this:

ImageAsset = function (path) {
    this.ready = false; // I want the image.onload function to change this variable.

    this.image = new Image;
    this.image.onload = function () {
        thisParent.ready = true;
    };

    this.path = path;

    this.image.src = this.path;
};

Is there any way that I could do this? Thanks!

score 1 · Accepted Answer · answered Jul 05 '14 at 10:26

1

You can if you use a variable

ImageAsset = function (path) {

    var that = this; // store the value of "this"

    this.ready = false;

    this.image = new Image;

    this.image.onload = function () {
        that.ready = true;
    };

    this.path = path;

    this.image.src = this.path;
};

answered Jul 05 '14 at 10:26

adeneo

312,895
29
395
388

@jcaron - Yup, just noticed that the OP somehow added a property ? – adeneo Jul 05 '14 at 10:28
That's clever - Thanks! – Bentley Carr Jul 05 '14 at 10:38

score 0 · Answer 2 · answered Jul 05 '14 at 10:26

0

I'd say:

ImageAsset = function (path) {
    this.ready = false; // I want the image.onload function to change this variable.

    this.image = new Image;
    var parent = this;
    this.image.onload = function () {
        parent.ready = true;
    };

    this.path = path;

    this.image.src = this.path;
};

answered Jul 05 '14 at 10:26

jcaron

17,302
6
32
46

That's clever - Thanks! – Bentley Carr Jul 05 '14 at 10:39

score 0 · Answer 3 · edited May 23 '17 at 12:11

There are generally two ways to do this.

You can bind the executing scope of your function to "parent".

this.image.onload = function () {
        this.parent.ready = true;
 }.bind(this);

Note, bind is only available for certain browsers. So you'll proabaly want to use a polyfill so you can use bind in all browsers. Also, many Javascript frameworks provide equivalents of the bind function. For example, jQuery provides proxy.

this.image.onload = $.proxy(function () {
    this.parent.ready;
}, this);

Make a "parent" closed over variable.

var parent = this;
this.image.onload = function () {
    parent.ready = true;
};

Personally, I tend to go with option 1.

JavaScript - Can I get the parent object of a method?

3 Answers3