Javascript prototype and jQuery

Question

Consider this example:

wofForm = function( $form ) {
 this.form = $form;
 this.select = this.form.find(".sm-product-select");
 this.productChange();
}
wofForm.prototype.productChange = function() {
 this.select.on("change", **this.checkIfVariableProduct** )
}
wofForm.prototype.checkIfVariableProduct = function() {
 console.log("searching ", this );
} 

Why when I pass the this.checkIfVariableProduct inside productChange it's actually passing the select object, instead of wofForm instance? I would like to pass the wofForm instance further, not the jQuery object of the select.

Answer 1

The this value of the handler is set by jQuery's on method. "When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered." For setting the this value manually you can use the Function.prototype.bind or $.proxy method.

 this.select.on("change", this.checkIfVariableProduct.bind(this) );

• Tushar: I think I misunderstood the question
• GillesC: An example using $.proxy, as mentioned, would be a nice addition to this good answer.