Control the "this" context on callback

Question

I have a listener like this one :

this.frame.on('touchend', self.findClosestSlide);

I need to have it like this, instead of inside an anonymous function in order to be able to unbind it later, using the function name.

My problem is that, once I am in the findClosestSlide function, my this object logically becomes this.frame.

How can I access the original this, or how can I have control on the context I'm sending to my callback function? (without using an anonymous function)

`this.frame.on('touchend', self.findClosestSlide.bind(this));`? — gen_Eric, Mar 13 '14 at 16:05

score 2 · Answer 1 · answered Mar 13 '14 at 16:05

2

You can store this inside another variable such as that or $this than using it inside your findClosestSlide function.

answered Mar 13 '14 at 16:05

Felix

37,892
8
43
55

I used Arun's answer instead but +1, since it would work. Thanks :) – Romain Braun Mar 13 '14 at 16:17

score 2 · Accepted Answer · answered Mar 13 '14 at 16:06

You can use Function.bind() or $.proxy() to pass a custom context to a callback like

Cross Browser, use $.proxy()

this.frame.on('touchend', $.proxy(self.findClosestSlide, self));

or IE9+, use function.bind()

this.frame.on('touchend', self.findClosestSlide.bind(self));

Why? because by default this inside the event handler will refer to the element that was targeted by the event

Control the "this" context on callback

2 Answers2