How do child JavaScript classes refer to properties in the parent?

Question

I've a JavaScript class (myJqGrid) who has a property which is a jqGrid object. I want my jqGrid event callbacks to be able to use properties in my class (myJqGrid). How do I do this?

For example, in code at bottom, how would loadComplete refer to myJqGrid.selectedIds?

In my code I do:

let myGrid = new myJqGrid('someUrl/foo/bar', colNames, colModel);
myGrid.loadGrid(somePostDictionary);

I can't use this.selectedIds, this doesn't refer to my myJqGrid instance. And if I don't prefix selectedIds it can't resolve to the containing class' scope.

This is the class:

class myJqGrid {
    grid; // the jqGrid object
    selectedIds = [];

    constructor(url, columnNames, model, gridId = 'jqGrid', pagerId ='jqGridPager') {
        this.url = url;
        this.gridHeader = columnNames;
        this.gridModel = model;
        this.gridId = gridId;
        this.pagerId = pagerId;
    }

    loadGrid(postData) {
        $('#grid').jqGrid('GridUnload');

        this.grid = $('#' + this.gridId).jqGrid({
            url: this.url,
            datatype: "json",

            // ...

            loadComplete: function () {
                // How do I refer to selectedIds of the parent class here?
                // this.selectedIds is undefined, because `this` doesn't point to pdxJqGrid
            }
        }
    }
}

This doesn't really have anything to do with classes per se. It's just accessing the correct `this` in a callback. See the [linked question](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback)'s answers for how. (Short version: Use an arrow function for `loadComplete`.) — T.J. Crowder, Mar 27 '20 at 15:06
I'm not sure that answers my question though. My class is defined in one file, but used elsewhere. My file can't know how many instances of itself are made, and therefore can't use a single global variable to store its own reference. — Developer Webs, Mar 27 '20 at 15:09
@AlexandreSenges I don't know enough about JavaScript to correlate your snippit with his URL. You seem to be saying use an anonymous function, which I did do. — Developer Webs, Mar 27 '20 at 15:11
@DeveloperWebs I'm not sure I understand what you mean. Why would you need to know how many instances of the class are made? — Alexandre Senges, Mar 27 '20 at 15:14
@AlexandreSenges the URL mentions making a copy of this, storing it in another variable. So in the constructor of my class I might do self = this. But I still can't refer to `self` in the event called by the inner class...? — Developer Webs, Mar 27 '20 at 15:17
@AlexandreSenges Wait, sorry, I think I had another issue. So what I did in my class is do: `parent = this` and then in the callback used parent.selectedIds, I think that seems to work — Developer Webs, Mar 27 '20 at 15:20
@AlexandreSenges All the classes are in my original post. myJqGrid and the actual jqgrid object. — Developer Webs, Mar 27 '20 at 15:21
I added property "parent" to class myJqGrid. Then in the constructor for myJqGrid I do `parent = self;`. Then in my callback methods I reference `parent.selectedIds`. I guess the callback functions are scoped to the INSTANCE of the class that uses them? — Developer Webs, Mar 27 '20 at 15:33
I find this confusing that anywhere in the class I have to prefix properties with `this`, else it says the variable is unknown, but in the callback functions I can use `parent.selectedIds` (see previous comment) without error. — Developer Webs, Mar 27 '20 at 15:39

How do child JavaScript classes refer to properties in the parent?

0 Answers0