0

The following code doesn't work as I intuitively expect it to:

function MyObject(input) {
   input.change(this._foo);
   this.X = undefined;
}

MyObject.prototype._foo = function() {
   alert("This code is never called");
   // but if it did
   this.X = true;
}

var test_input = $("input#xyz"); // a random, existing input

var m = MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // undefined

I'd expect that _foo() would be called (and, if that ever happens, that the this variable in _foo() would be an instantiation of MyObject.

Does anyone know why this doesn't work, and of any alternative pattern for passing an object to an event handler?

Thank you for reading.

Brian

Brian M. Hunt
  • 81,008
  • 74
  • 230
  • 343
  • There are existing methods for attaching events (`bind()`, `live()`) and triggering events (`trigger()`) in jQuery. I'm not sure what you're getting at here. Also, it seems to me that if you want an objects method called, you need to call it like `this._foo()` and not `this._foo` otherwise you're doing assignment. It's entirely possible I'm misunderstanding you though. – artlung Jun 10 '10 at 22:12
  • possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) – Bergi Feb 27 '14 at 18:59
  • Thanks Bergi. The referenced question was asked three years after this one was closed, so wouldn't the duplication would actually go the other direction? It is incorrect and seems misleading to mark this question as "already answered" by a question that came by three years later. Would that question not be a duplicate of this one? – Brian M. Hunt Feb 27 '14 at 19:18

3 Answers3

4

As Kenny points out you're missing the new. You also need to make sure that this in _foo refers to the MyObject instance
One way to do it:-

function MyObject( input ) {
    var _this = this;
    input.change( function() {
       // explicitly set the `this` in _foo to `_this`
        _this._foo.call( _this );
    });
   this.X = undefined;
}

MyObject.prototype._foo = function( event ) {
   alert("This is called");
   // and 'this', being 'm', has X set to true
   this.X = true;
   // the textbox must be accessed by 'event.target' not 'this' if you need it
}

var test_input = jQuery("input#xyz"); // a random, existing input

var m = new MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // true

P.S You can't avoid using the new operator by leaving it out! :)

meouw
  • 41,754
  • 10
  • 52
  • 69
2

To create an object in Javascript, use new.

var m = new MyObject(test_input); // attach handler (or try to)
kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
  • I've been trying to avoid `new`, as Douglas Crockford suggests, but you're correct in pointing out at least this one fault with the code. :) – Brian M. Hunt Jun 10 '10 at 21:34
  • @Brian: Without using `new`, `this` inside `MyObject` points to `window`, rather than the "instance" of `MyObject`. I put "instance" within quotes, as by not wanting to use `new`, you're never going to create instances of anything. – Matt Jun 10 '10 at 22:10
1

This question is kind of old now, but there's another solution. Your problem is as meouw mentioned, you missed the 'new', and the 'this' reference in an event handler will always be the element on which the event was triggered, not the object handling the event.

Since you're using JQuery, there's an easy way to get this to act the way you want. Use the JQuery.proxy method to set the context of the event handler to use your object as 'this'. In your example, you just have to change the line

input.change(this._foo);

to

input.change(jQuery.proxy( this, "_foo" ));

Give that a try if you run into this problem with JQuery again.

Kelly Lawson
  • 11
  • 1