Javascript callbacks losing 'this'
callback, javascript, object, scope, this
Solution
function CheckBox(input_id) {
this.id = input_id;
this.doSomething = $.proxy( this.doSomething, this );
$('#some-element').click(this.doSomething);
}
The "javascript equivalent" of this is `Function#bind` but that is not available in every browser and since it seems you are using jQuery I am using the jQuery equivalent `$.proxy`
Problem
I have an issuer where I lose the `this` inside this object. The output of the following piece of JavaScript gives me `"some-id"` and then `undefined`. When I use `this` inside a callback function, the scope goes out of the object and it cannot use `this` any more. How can I get the callback to use 'this' or at least have access to the object? Since I will make multiple objects, I won't be able to create a 'static' like storage. Here is my test code that you can use to reproduce my problem. What I would like to have is `CheckBox.doSomething()` to return the value of `this.id` which should match `some-id` for this test case. ``` function CheckBox(input_id) { this.id = input_id; this.doSomething(); $('#some-element').click(this.doSomething); } Checkbox.prototype.doSomething = function() { alert(this.input_id); } var some_box = new CheckBox('some-id'); some_box.doSomething(); $('#some-element').click(); ``` I can't even get this to work as I want it to: ``` function CheckBox2(input_id) { this.id = input_id; alert(this.id); } CheckBox2.prototype.doSomething = function() { alert(this.input_id); } var some_box = new CheckBox2('some-id'); some_box.doSomething(); ```