If you're doing ASP.NET AJAX and you're creating a lot of JavaScript then you are hopefully aware of the Function.createDelegate method. If you're not using the createDelegate method then read on!
When you're building your classes in ASP.NET AJAX you'll have various function that interact with each other. Sometimes you may even have external methods that you're calling. So when you want to reference a javascript object you would probably pass the object through the parameters list. When it comes to doing a Web Service call you have a callback method for success and fail such as:
var el = this;
Client.GetSomeField(1, 5, onSuccess, onFail);
function onSuccess(r) {
var el = this;
alert(r);
}
Everything looks dandy. However when I use "this" inside any of the callback methods I won't get the object I am looking for. Lets say I wanted to pass "this" object to my onSuccess function. How could I do that? Well that's where the createDelegate comes in:
var el = this;
var newSuccess = Function.createDelegate(el, onSuccess);
Client.GetSomeField(1, 5, newSuccess, onFail);
function onSuccess(r) {
// You now have access to the same object using "this"
var hw = this.HelloWorld();
alert(r + hw);
}
Wow well that was easy! The cool thing about this is that you can pass any object with the createDelegate method. So if I wanted to pass a string I could do:
var el = "Hey I came from down the way";
var newSuccess = Function.createDelegate(el, onSuccess);
Client.GetSomeField(1, 5, newSuccess, onFail);
function onSuccess(r) {
var hw = this; // this = "Hey I came from down the way"
alert(r + hw);
}
Tada! I just passed my string across.
Well now wait a second, I have another function that takes in a few extra params. It's not within a Web Service method, it's an external function. How do I use createDelegate with that?
var el = this;
var newSuccess = Function.createDelegate(el, onSuccess);
// Call the function
newSuccess(param1, param2, param3);
function onSuccess(p1, p2, p3) {
// still the same object that we passed
var hw = this.HelloWorld();
hw += p1;
hw += p2;
hw += p3;
alert(hw);
}
The createDelegate method takes two parameters. The first one is the object that will be referenced by "this" (inside the function). The second parameter is the function to be executed (where you'll use "this").
Another good trick is to use the createDelegate function with the $addHandler method:
$addHandler(btnSave, 'click', Function.createDelegate(someOtherObj, this.onSaveClicked));
So in conclusion, why use createDelegate? It wraps an existing function and returns a new function which can use the "this" keyword that points to an object of your desire. Why do I need this? In an event handler raised by a DOM element the "this" keyword will refer to the DOM element whereas you may want it to refer to a class or class object, or any other object for that matter.