javascript - How do I pass the this context to a function? - Stack Overflow

admin管理员组

文章数量:1129618

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.

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.

• javascript
• jquery
• scope
• this

Share Improve this question Follow edited Jun 7, 2015 at 11:17 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Sep 2, 2010 at 18:31 user126715user126715 3,85833 gold badges2424 silver badges2525 bronze badges 2

• Possible duplicate: stackoverflow.com/questions/520019/… – user123444555621 Commented Sep 2, 2010 at 18:39
• I know this is an old question, but for others landing here see jQuery $.proxy – RyBolt Commented Jul 15, 2016 at 15:34

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 358

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.

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.

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

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"

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

本文标签： javascriptHow do I pass the this context to a functionStack Overflow