JQuery Widget, losing reference to "this"

Question

Note: the code looks long but its simple psuedo code for demo purpose. Don't flee!

I have written a widget that listens for key presses. When the onKeyDown event is fired the reference to this is lost. So I set a scoped variable called self to reference the widget. self is initalised when the widget is created.

This works but I'm not sure this is the right approach. I think the solution here is to do with a proxy? perhaps the self variable is already acting as a proxy? anyone want to shed some light on whats happening?

(function($)
{   
    var vendorPrefix = Modernizr.prefixed("transform");
    var self;

    $.widget("ui.myWidget", {

        _create: function()
        {  
            self = this;            
            //Do some widget stuff  
            document.addEventListener('keydown', this.onKeyDown, false)
            return this;
        },

        exampleFn: function()
        {
        },

        onKeyDown: function(event)
        {
            // this now refers to "document" and not the widget             
            switch(event.keyCode)
            {
                case 37: 
                    self.exampleFn();
                    break;
                case 39:
                    self.exampleFn();
                    break;
            }
        }

    });
})(jQuery);

Using `self = this` is perfectly valid. – Nick Brunt Sep 06 '12 at 16:27 — Nick Brunt, Sep 06 '12 at 16:27

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You can also use jQuery.proxy() if you'd like to get rid of the self variable:

onKeyDown: $.proxy(function(event)
{
    // this now refers to "document" and not the widget             
    switch(event.keyCode)
    {
        case 37: 
            this.exampleFn();
            break;
        case 39:
            this.exampleFn();
            break;
    }
}, this)

Anyway, what's happening is that this in a function refers to that function. So this in onKeyDown is onKeyDown function. If you use a proxy like I did above, this in onKeyDown will become a reference to the parent function.

More on this behavior in JavaScript: How does the "this" keyword work?

edited May 23 '17 at 12:04

Community

1
1

answered Sep 06 '12 at 16:44

Pawel Krakowiak

9,940
3
37
55

Hi Pawel, this is what I was thinking off. I'm a little unsure as to whether I have successfully scoped "self" or not, or have I created a global? I'm a little conflicted about what to do. "this" should really refer to the event, because thats the expected behaviour, at the same time, I am trying to constrain the event to within the widget... – Jon Wells Sep 10 '12 at 09:02
I couldn't get you application of proxy to work so I used this "document.addEventListener('keydown', $.proxy(this.onKeyDown, this), false);" – Jon Wells Sep 10 '12 at 09:31
I think that your approach with the `self` variable is also OK, that variable won't be available outside of the function in which it is declared. I often do it that way - it really depends on what I need. But I am not a so called JavaScript ninja. :) – Pawel Krakowiak Sep 11 '12 at 08:53

score 0 · Answer 2 · answered Sep 06 '12 at 16:28

0

This is because the "this" keyword refers to the object where the event is attached.

Using the self tip is a good choice.

answered Sep 06 '12 at 16:28

Jerome Cance

8,103
12
53
106

score 0 · Answer 3 · answered Sep 06 '12 at 16:41

0

I'm not sure what you mean by proxy as there's no such thing in javascript, but no, it's not the right way of doing it as you've essentially created a global variable.

For instance, if the widget were initialized multiple times you would probably see some really weird behaviour depending on your code.

Get rid of the global var self and move it to above the _create method inside the object declaration so it's a private variable to that object.

answered Sep 06 '12 at 16:41

mattmanser

5,719
3
38
50

Is `var self` global in the scope of that function? – MalSu Sep 06 '12 at 16:42
The "proxy" concept may refer to the behaviour that `$.proxy` exhibits. – pimvdb Sep 06 '12 at 16:44
@MalSu - is self global? I thought I had scoped it within the function? – Jon Wells Sep 10 '12 at 09:00

JQuery Widget, losing reference to "this"

3 Answers3