如何将 this 上下文传递给函数?
Posted
技术标签:
【中文标题】如何将 this 上下文传递给函数?【英文标题】:How do I pass the this context to a function? 【发布时间】: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 的方法,那将是理想的。
【问题讨论】:
可能重复:***.com/questions/520019/… 我知道这是一个老问题,但对于其他登陆这里的人,请参阅 jQuery$.proxy
【参考方案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
【讨论】:
以上是关于如何将 this 上下文传递给函数?的主要内容,如果未能解决你的问题,请参考以下文章
将正确的“this”上下文传递给 setTimeout 回调?
如何将对象上下文传递给 jQuery.ajax JSONP 回调?
如何使用 React 的 Context 功能将 HTML5 Canvas 上下文传递给 this.props.children?