jquery change operator "this" behaviour when handling events?

Question

Please consider the following class. I'm beginning to use JQuery.

function AutoHide(elemControl, elemContent) {
  this.elemControl = elemControl;
  this.elemContent = elemContent;
  this.delay = 500;
  this.duration = 500;
  this.direction = 'vertical';
  this.effect = 'blind';

  function softHide()  {
    if ($(this.elemContent).is(':visible')) {
      $(this.elemContent).delay(this.delay);
      $(this.elemContent).hide(this.effect, {direction: this.direction}, this.duration);
    }
    return this;
  };

  function softShow() {
    if ($(this.elemContent).is(':hidden'))
      $(this.elemContent).show(this.effect, {direction: this.direction}, this.duration);
    return this;
  };

  function setClickControl() {
    alert(this.elemControl);
    $(this.elemControl).click(softToggleVisibility);
  };

  this.softHide = softHide;
  this.softShow = softShow;
  this.setClickControl = setClickControl;

};

I have a global instance of the object AutoHide, and the methods softShow() and softHide() work like a charm (via Google Chrome's console). However, when I try to run the setClickControl() method, I realize that the operator "this" refers to an HTMLElement, and not to the class itself. Is this normal? I'm used to being able to consider the operator "this" a reference to the object i

I have outlined three ways to manipulate the `this` pointer in this [question](http://stackoverflow.com/questions/3349380/jquery-proxy-usage/3349438#3349438) - capturing `this` in a closure, through `jQuery.proxy`, and the new `bind` method on functions in ES3. The underlying approach for all these techniques is the same - to capture `this` in a closure and later refer to it. jQuery's `.proxy` and the Function prototype's `.bind` are simply convenient wrappers. — Anurag, Apr 03 '11 at 05:57
Can you add an example of how you are calling the member functions? — Eric, Apr 03 '11 at 08:33

score 1 · Accepted Answer · answered Apr 03 '11 at 05:57

You are correct. The hiding of the normal "this" object is the cause of a lot of confusion when first using jQuery. If you really need to make "this" act the way you're used to, use the jQuery proxy() API function:

http://api.jquery.com/jQuery.proxy/

jquery change operator "this" behaviour when handling events?

1 Answers1