I thought this would be something I could easily google, but maybe I'm not asking the right question...
How do I set whatever "this" refers to in a given javascript function?
for example, like with most of jQuery's functions such as:
$(selector).each(function() {
//$(this) gives me access to whatever selector we're on
});
How do I write/call my own standalone functions that have an appropriate "this" reference when called? I use jQuery, so if there's a jQuery-specific way of doing it, that'd be ideal.
Javascripts .call()
and .apply()
methods allow you to set the context for a function.
var myfunc = function(){
alert(this.name);
};
var obj_a = {
name: "FOO"
};
var obj_b = {
name: "BAR!!"
};
Now you can call:
myfunc.call(obj_a);
Which would alert FOO
. The other way around, passing obj_b
would alert BAR!!
. The difference between .call()
and .apply()
is that .call()
takes a comma separated list if you're passing arguments to your function and .apply()
needs an array.
myfunc.call(obj_a, 1, 2, 3);
myfunc.apply(obj_a, [1, 2, 3]);
Therefore, you can easily write a function hook
by using the apply()
method. For instance, we want to add a feature to jQuerys .css()
method. We can store the original function reference, overwrite the function with custom code and call the stored function.
var _css = $.fn.css;
$.fn.css = function(){
alert('hooked!');
_css.apply(this, arguments);
};
Since the magic arguments
object is an array like object, we can just pass it to apply()
. That way we guarantee, that all parameters are passed through to the original function.