Question

var dups = new Dups($("#el"))

function Dups($el) {
 this.value = 23
 $el.on("click", this.onClick)
}

Dups.prototype.onClick = function(){
// usually "this" inside here refers to the instance (Dups)
// but because jquery changes "this", inside here "this" refers to the clicked element
// how can I access the Dups instances "this.value" from here?
   alert(this.value) // does not alert 23
}

My Problem is in the Dups.prototype.onClick function. Any ideas how to elegantly access the Dups instances “this” other than passing “this” (the clicked element) manually, so “this” in the prototype.onClick is the desired one, like so:

...
$el.on("click", function(){this.onClick(this)})
....

It works but I am wondering if there is a better way.

Answer 1

You can use $.proxy as a portable implementation of bind:

function Dups($el) {
    this.value = 23;
    $el.on("click", $.proxy(this.onClick, this));
}

$.proxy gives you a new function that executes with the specified this:

jQuery.proxy( function, context )
Returns: Function

Description: Takes a function and returns a new one that will always have a particular context.

The standard bind method on function objects does the same thing (and more) but isn’t available everywhere.

Then you could get the clicked element through the passed event if you needed it:

Dups.prototype.onClick = function(event) {
    // event.target is what was clicked
}

Demo (open your console please): http://jsfiddle.net/ambiguous/K2BuX/