Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Call function with "this"

Tags:

javascript

I have an onclick handler for an <a> element (actually, it's a jQuery-created handler, but that's not important). It looks like this:

function handleOnClick() {
    if(confirm("Are you sure?")) {
        return handleOnClickConfirmed();
    }
    return false;
}

From this function, the this object is accessable as the <a> element clicked. However, handleOnClickConfirmed's this is a Window element! I want handleOnClickConfirmed to have the same this as handleOnClick does. How would I do this?

(I know I can pass this as an argument to handleOnClickConfirmed, but some of my code already uses handleOnClickConfirmed and I don't want to have to rewrite those calls. Besides, I think using this looks cleaner.)

like image 648
strager Avatar asked Nov 28 '08 03:11

strager


2 Answers

The following ought to do it:

function handleOnClick() {
    if( confirm( "Sure?" ) ) {
        return handleOnClickConfirmed.call( this );
    }
    return false;
}

The call() function attached to Function objects is designed to allow this; calling a function with a desired context. It's an extremely useful trick when setting up event handlers that call back into functions within other objects.

like image 158
Rob Avatar answered Oct 14 '22 16:10

Rob


Rob's answer is the best answer for your problem, but I wanted to address something that you wrote in your original question:

I know I can pass this as an argument to handleOnClickConfirmed, but some of my code already uses handleOnClickConfirmed and I don't want to have to rewrite those calls.

JavaScript parameters are always optional, as far as the interpreter is concerned. For example if you have the function:

function MyFunction(paramA, paraB) {
  // do nothing
}

All of these calls will execute without error:

MyFunction(1,2);
MyFunction(1);
MyFunction();

So you could modify handleOnClickConfirmed to accept what would essentially be an optional parameter. Like so:

function handleOnClickConfirmed(context) {
  context = context || this;
  // use context instead of 'this' through the rest of your code
}

Again, in this particular case, the call function is the best solution. But the technique I outlined above is a good one to have in your toolbox.

like image 23
Benry Avatar answered Oct 14 '22 16:10

Benry