【问题标题】:How do I pass the this context to a function?如何将 this 上下文传递给函数?
【发布时间】:2011-04-07 12:01:23
【问题描述】:

我认为这很容易用谷歌搜索,但也许我没有问正确的问题......

如何在给定的 javascript 函数中设置“this”所指的内容?

例如,与大多数 jQuery 函数一样,例如:

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

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

【问题讨论】:

标签: javascript jquery scope this


【解决方案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]);

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

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

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

【讨论】:

  • 只是一个有趣的花絮:如果您需要重复调​​用该函数引用obj_a,例如,您可以使用var boud_myfunc = myfunc.bind(obj_a)创建它的副本,并根据需要简单地调用bound_myfunc() .
【解决方案2】:

Use function.call:

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

其中that 是您希望函数中的this 成为的对象。

【讨论】:

  • function 是保留关键字;考虑更新您的响应以包含命名函数,因为 function.call(...) 不是有效的 JavaScript。
  • @DanielAllen:如果没有定义我将提供的任何示例函数名称,代码仍然会引发 JS 错误。但是,我更新了示例函数名称。
【解决方案3】:

另一个基本示例:

不工作:

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

【讨论】:

  • 这应该是公认的答案。更简单的语法,更轻松的头脑......干得好乔里
【解决方案4】:

您可以使用bind 函数在函数中设置this 的上下文。

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

【讨论】:

  • 我怀疑这个目前是正确答案的答案是否会获得最多的选票。应该有一个选项可以查看根据过去的时间加权投票的答案。
【解决方案5】:

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

编辑:

当您有疑问时,不要害怕查看 jQuery 的代码,所有这些都包含在清晰且有据可查的 Javascript 中。

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

【讨论】:

    猜你喜欢
    • 2016-12-11
    • 2018-01-23
    • 2014-06-02
    • 1970-01-01
    • 2011-12-07
    • 2012-10-28
    • 1970-01-01
    • 2011-07-26
    • 2016-04-30
    相关资源
    最近更新 更多