255

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.

2

5 Answers 5

349

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.

1
  • 6
    Just a fun tidbit: if you need to call the function repeatedly in reference to obj_a, for example, you can create a copy of it with var boud_myfunc = myfunc.bind(obj_a) and simply call bound_myfunc() as needed.
    – wbadart
    Nov 15, 2016 at 7:20
57

Use function.call:

var f = function () { console.log(this); }
f.call(that, arg1, arg2, etc);

Where that is the object which you want this in the function to be.

3
  • 2
    function is a reserved keyword; consider updating your response to include a named function since function.call(...) is not valid JavaScript. Sep 14, 2017 at 14:44
  • 1
    @DanielAllen: Without the definition of whatever sample function name I would provide, the code will still throw a JS error. But, I updated the sample function name.
    – palswim
    Sep 15, 2017 at 1:00
  • Works like magic, thanks a lot!
    – Or Assayag
    Sep 18 at 20:22
37

Another basic example:

NOT working:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
};
img.src = reader.result;

Working:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
}.bind(this);
img.src = reader.result;

So basically: just add .bind(this) to your function

1
  • 2
    This should be the accepted answer. Much easier syntax, much easier on the mind...good job Joery
    – nenea
    Apr 18, 2019 at 2:37
30

You can use the bind function to set the context of this within a function.

function myFunc() {
  console.log(this.str)
}
const myContext = {str: "my context"}
const boundFunc = myFunc.bind(myContext);
boundFunc(); // "my context"
1
  • 2
    I doubt this answer, which is currently the correct answer, will ever get the most votes. There should be an option to view answers where upvotes are weighted based on the time that has passed.
    – Dave F
    Dec 21, 2021 at 1:55
17

jQuery uses a .call(...) method to assign the current node to this inside the function you pass as the parameter.

EDIT:

Don't be afraid to look inside jQuery's code when you have a doubt, it's all in clear and well documented Javascript.

ie: the answer to this question is around line 574,
callback.call( object[ name ], name, object[ name ] ) === false

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.