如何将此上下文传递给函数?

时间:2010-09-02 18:31:17

标签: javascript jquery scope this

我认为这是我可以轻松谷歌的东西,但也许我不是在问正确的问题......

如何在给定的javascript函数中设置“this”指的是什么?

例如,像大多数jQuery的函数一样,例如:

$(selector).each(function() {
   //$(this) gives me access to whatever selector we're on
});

如何在调用时编写/调用我自己的独立函数,这些函数具有适当的“this”引用?我使用jQuery,所以如果有一种特定于jQuery的方法,那就太理想了。

5 个答案:

答案 0 :(得分:275)

Javascripts .call().apply()方法允许您为函数设置上下文

var myfunc = function(){
    alert(this.name);
};

var obj_a = {
    name:  "FOO"
};

var obj_b = {
    name:  "BAR!!"
};

现在你可以致电:

myfunc.call(obj_a);

哪会警告FOO。反过来,通过obj_b会提醒BAR!!.call().apply()之间的区别在于,如果您将参数传递给函数并且.call()需要数组,则.apply()采用逗号分隔列表。

myfunc.call(obj_a, 1, 2, 3);
myfunc.apply(obj_a, [1, 2, 3]);

因此,您可以使用hook方法轻松编写函数apply()。例如,我们想要为jQuerys .css()方法添加一个功能。我们可以存储原始函数引用,用自定义代码覆盖函数并调用存储函数。

var _css = $.fn.css;
$.fn.css = function(){
   alert('hooked!');
   _css.apply(this, arguments);
};

由于magic arguments对象是一个类似于object的数组,我们可以将其传递给apply()。这样我们保证所有参数都传递给原始函数。

答案 1 :(得分:42)

Use

_function.call(that, arg1, arg2, etc);

that是函数中想要this的对象。

答案 2 :(得分:16)

jQuery使用.call(...)方法将当前节点分配给您传递的函数内的this作为参数。

修改

当你有疑问时,不要害怕查看jQuery的代码,这些都是清晰且记录良好的Javascript。

即:这个问题的答案是围绕第574行,callback.call( object[ name ], name, object[ name ] ) === false

答案 3 :(得分:8)

您可以使用bind函数在函数中设置function myFunc() { console.log(this.str) } const myContext = {str: "my context"} const boundFunc = myFunc.bind(myContext); boundFunc(); // "my context" 的上下文。

while (($lastPos = strpos($html, $needle, $lastPos))!== false) {
    $positions[] = $lastPos;
    $lastPos = $lastPos + strlen($needle);
}

答案 4 :(得分:2)

另一个基本示例:

不起作用:

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

工作:

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

所以基本上:只需将.bind(this)添加到您的函数中