Access class members from nested functions

Question

i have this class in javascript

var MyGird = Class.extend({
  classMemeber1 : "Some Value"
  ,clickEvent : function(){
        this.editor.on({
            afteredit: function() {
                //
                //  HOW TO I ACCESS classMemeber1 from here? ?
                //
                //
            }
        })
})

how do i access classMemeber1 from inside of afteredit...
Thanks

What JS framework are you using? Looks like what you're doing here is more complex than I thought. — Brad Mace, Oct 16 '10 at 18:03

score 36 · Accepted Answer · edited May 23 '17 at 11:46

You need to save a reference to the object invoking clickEvent function by storing this ^[1] in a variable. It will be available inside the afteredit method because of closure.

var MyGird = Class.extend({
    classMemeber1: "Some Value",
    clickEvent: function () {
        var self = this; // save object reference
        this.editor.on({
            afteredit: function () {
                // access classMemeber1 from here
                // by using the stored reference
                alert(self.classMemeber1);
            }
        });
    },
    // ...
});

^{[1] this operator in javascript (note: 'this' is not an operator)}

I am new to JavaScript. Your answer saved me lot of trouble :) Thanks a lot — Jimit Patel, May 18 '18 at 13:04

score 8 · Answer 2 · answered Mar 31 '17 at 15:01

If you write ES6, you can use arrow functions: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

In your example, should be something like (not tested):

var MyGird = Class.extend({
    classMemeber1: "Some Value",
    clickEvent: () => {
        this.editor.on({
            afteredit: () => () {
                alert(this.classMemeber1);
            }
        });
    },
    // ...
});

Access class members from nested functions

2 Answers2