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

Question

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

如何在给定的javascript函数中设置"this"指的是什么？

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

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

如何在调用时编写/调用我自己的独立函数,这些函数具有适当的"this"引用？我使用jQuery,所以如果有一个特定于jQuery的方法,那就是理想的.

Answer 1

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);
};

由于魔术arguments对象是一个像对象一样的数组,我们可以将其传递给apply().这样我们保证所有参数都传递给原始函数.

Answer 2

用途:

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

function.call函数中你想要的对象在哪里that.

Answer 3

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

编辑:

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

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

Answer 4

您可以使用bind函数设置this函数内的上下文.

function myFunc() {
  console.log(this.str)
}
const myContext = {str: "my context"}
const boundFunc = myFunc.bind(myContext);
boundFunc(); // "my context"

Answer 5

另一个基本示例：

不起作用：

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）添加到您的函数中