[ACCEPTED]-How to change the context of a function in javascript-scope

jQuery makes use of it to good effect:

$('a').each(function() {
    // "this" is an a element - very useful
});

The 5 actual jQuery code looks like this:

for ( name in object ) {
    if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
        break;
    }
}

If it 4 just did callback( name, object[ name ] ) then this wouldn't be set to the current 3 object in your iterator and you'd have to 2 use the parameter instead. Basically it 1 just makes things easier.

Please have a look at this example:

<script>
var el = document.getElementById('button');
el.onclick = function(){
    this.value = "Press Me Again"; //this --> now refers to the the element button not on the window
}

//Another Example:
var Person = function(name,location){
  this.name = name;
  this.location = location;  
  alert(this.location); 
}   
var p2 = new Person("Samantha","California"); //this refers to the instance of the function Person(Person now acts as a class)
var p1 = Person(); // this refers to the window(Person simply acts as a simple function)
</script>
<button id="button1">Press Me</button>

The new 1 keyword changes the context.

It's very useful when doing callbacks from 5 AJAX requests:

function Person(_id, _name) {
    this.id = _id;
    this.name = _name;
};

Person.prototype.sayHi = function(greeting) {
    alert(greeting + " from " + this.name);
};

Person.prototype.loadFromAJAX = function(callback) {
    // in this example, it's jQuery, but could be anything
    var t = this;
    $.get("myurl.php", function(data) {
        callback.call(t, data.greeting);
    });
};

Actually, that's a pretty 4 crappy example.

There are tons of uses of 3 it in jQuery. For example, the jQuery().get() function:

get: function( num ) {
    return num === undefined ?
        // Return a 'clean' array
        Array.prototype.slice.call( this ) :
        // Return just the object
        this[ num ];
}

It's 2 using the functions of the Array prototype 1 but in the context of the jQuery object.

A real world example that i've encountered:

If 12 you add a function as an event handler to 11 a DOM element and if you use "this" inside 10 that function, "this" will refer 9 to the DOM element that you added the event 8 handler to.

But that function might be a 7 method of an object and you want the "this" keyword 6 used inside it to refer to the owner object...so 5 you need to change the context so that "this" will 4 not refer to the DOM element but will refer to the 3 owner object.

You can easily change the context of a 2 function in jquery using the proxy() function. See 1 this question: jquery "this" binding issue on event handler (equivalent of bindAsEventListener in prototype) and the first answer

bind function might be what you're looking 11 for, bind function returns a new function 10 with in the context that you passed in , a 9 real world scenario could be when you are 8 using jquery delegates to attach some behavior 7 to a dom element, and you want the callback 6 being execute in a different context. 'cause 5 the default context in a jquery delgate 4 is the dom object that is bound to the handler 3 , which means you can't access any property 2 besides the properties that belongs to the 1 dom object

I always find myself in the need of having 2 different context when using setTimeout and jQuery 1 has a handy function $.proxy which does the trick:

function iAmCalledAfterTimeout()
{
     alert(this.myProperty); //it will alert "hello world"
}    

setTimeout($.proxy(iAmCalledAfterTimeout, {myProperty:"hello world"}), 1000);