How can I access the parent object from an inner function in Javascript?

Question

I have declared a class in the following way:

function maskEditor() {
    this.init();
};

maskEditor.prototype = {
    foo: null,
    container: new createjs.Container(),

    init:function () {
        this.foo = "bar";
        this.container.on("mousedown", this.onMouseDown); // This is just an easeljs event dispatcher
    },

    onMouseDown: function (event) {
        alert(this.foo); // WRONG. 'this' is out of the scope :(
    }
};

Long story short: Im using easeljs library, and I have declared an event dispatcher to capture mouse clicks. I need to access the maskEditor object from inside that method. How can I do that?

Sorry, I didnt know how to formulate the question the right way, I see that it is duplicated. The **bind()** method made the trick :) — Chemari, Jul 02 '15 at 16:44
Actually, there is a canonical way of setting the context (and other parameters) in [Container#on](http://www.createjs.com/docs/easeljs/classes/Container.html#method_on) (pass it as the 3rd parameter). — MasterAM, Jul 04 '15 at 12:33

score 1 · Accepted Answer · answered Jul 02 '15 at 16:32

1

You need to bind the context to the eventhandler:

this.container.on("mousedown", this.onMouseDown.bind(this));

answered Jul 02 '15 at 16:32

Sebastian Nette

7,364
2
17
17

How can I access the parent object from an inner function in Javascript?

1 Answers1