How to access class member variables inside an event handler defined in a class prototype - Javascript

Question

I've seen this solution that works when the event is defined in the constructor:

Accessing class member variables inside an event handler in Javascript

But when the handler is defined in the prototype it doesn't have scope to see "var _self" from the previous solution. Is there a variation that will work for code similar to below?

The problem is with the "this" in the "slide" handler... referring to the HTML element instead of the member variables in MyView.

function MyView(wrapperDiv)
{
    this.contentW = 1200;
    this.vboxW = 600;
    this.vboxH = 400;
    this.vboxX = 0;
    this.vboxY = 0;
}

MyView.prototype = {

    initHorizontalScrollBar : function ($bar)
    {
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<\div class="slider-wrap"><\div class="slider-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);

        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {

                var difference = this.contentW-this.vboxW;
                if(difference<=0)
                    return;
                this.vboxX =  (ui.value) / 100 * ( this.contentW-this.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(this.vboxX, this.vboxY, this.vboxW, this.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     


        this.sizeHScrollbar();
    }
};

score 1 · Accepted Answer · answered Feb 18 '13 at 21:29

You just need to add a variable holding the correct reference within your initHorizontalScrollBar method:

MyView.prototype = {

    initHorizontalScrollBar : function ($bar)
    {
        var _self = this;
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<\div class="slider-wrap"><\div class="slider-horizontal"><\/div><\/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);

        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {

                var difference = _self.contentW - _self.vboxW;
                if(difference<=0)
                    return;
                _self.vboxX =  (ui.value) / 100 * ( _self.contentW - _self.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(_self.vboxX, _self.vboxY, _self.vboxW, _self.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     


        this.sizeHScrollbar();
    }
};

Thanks @jfbalanc . I have a follow-up question in a similar context, hopefully it's as simple. `MyView` creates SVG elements, and I attach click handlers to them via `myElement.addEventListener("click", this.onCellClick);`. But in MyView's `onCellClick` handler, `this` refers to the clicked element, so setting `var_self = this` refers back to the clicked element and not the instance of `MyView`. — Jonathan Cakes, Feb 18 '13 at 22:14
You can pass a `MyView` reference to `onCellClick` or you can try moving your `onCellClick` code like so: `MyView.prototype.method = function() {var _self = this; //your code myElement.addEventListener("click", function() { //your onCellClick code //you can now access MyView methods like so _self.methods }); }` Check out these articles for some scope examples/info [Variable Scope](http://stackoverflow.com/questions/500431/javascript-variable-scope) and [Public, Private, and Protected Patterns](http://javascript.crockford.com/private.html). — jfbalanc, Feb 19 '13 at 05:55

How to access class member variables inside an event handler defined in a class prototype - Javascript

1 Answers1