jQuery Multiple Callbacks "this" reference

jQuery Multiple Callbacks "this" reference

本文关键字：quot reference this Multiple Callbacks jQuery      更新时间：2023-09-26

我正在努力通过配置对象输入的事件回调函数向jQuery组件添加一些功能更改。

我真的很想将每个功能更改分离到它自己的一组函数中。

我想知道的是如何最好地处理"这个"引用。由于我想将多个函数附加到每个回调，因此我假设每个调用其他选项的选项都需要一个匿名函数。我会简单地将"this"引用作为参数传递给我的函数，还是有更好的方法来做到这一点？

function somePluginAfterSelectFeatureOne(this, param ){
  // do stuff
}
function somePluginAfterSelectFeatureTwo(this, param){
  // do stuff
}
$('.some-element').somePlugin({
  afterSelect: function(param){
     somePluginAfterSelectFeatureOne(this, param);
  }
});

是的，我会建议"应用"或关闭 - 我不确定性能如何.. 我几乎不记得闭合器比绑定"这个"更好有什么原因，但我不相信你想要哪一个有什么大不了的。闭包并不总是有意义的，因为它与应用程序的架构/设计密切相关。

首先 - 我永远不会将"this"作为函数的参数传递，javascript 知道更好的方法来实现这一目标：

function somePluginAfterSelectFeatureOne(param ){
  // do stuff
}
function somePluginAfterSelectFeatureTwo(param){
  // do stuff
}
$('.some-element').somePlugin({
  afterSelect: function(param){
     somePluginAfterSelectFeatureOne(param);
  }
});

首先，从函数参数中删除"this"作为参数，这是错误的;)

现在调用"somePluginAfterSelectFeatureOne（param）"将失败，因为，这会是什么？好吧，"这"将导致定义函数时有效的范围（很难解释，请尝试调试它;)）

无论如何 - 要控制函数的"this"，您只需重写调用：

somePluginAfterSelectFeatureOne.apply(this, [param]);

现在，我想在您的"afterSelect： function（param）{ }"调用中已经可用的"this"是正确的，对吧？因此，通过使用本机函数"apply"，您可以将新的"this"传递给被调用的函数，并且您仍然可以传递所有普通参数 ->这只是"apply"的第二个参数。但请注意，当使用 apply -> 时，所有参数都必须作为数组传递（因为内部"参数"参数在每个函数调用中始终可用，实际上是内部数组）

现在，这仍然是直接绑定的解决方案 - 闭包仍然是一个不同的游戏：

$('.some-element').somePlugin({
  afterSelect: function(param){
     var _self = this,
         myFunction = function(param) {
             _self.anotherFn(param)
         };
     myFunction(param);         
  }
});

如您所见 - 我们只是将"this"存储为名为"_self"的局部变量。现在，如果函数定义与上面相同 -> "_self"将在其上使用，即使没有传递它（这就是我们所说的"闭包";)）。

但正如你也看到的 - 这并不总是有意义的......在您的示例中，您将被迫将函数定义移动到"afterSelect"函数内，这完全不是这里的目标。

因此，我会采用"应用"模式并很好地传递"this" - 一种"委托";)

哦，要做一个完整的综述 - 也可以直接在函数定义级别覆盖"this"。为此使用"绑定"：

function myFunction(param) {
    this.secondFunction(param)
}.bind(somethingDifferentWhichWillBeUsedAsThisInside)

我在这里也得到了一些关于这两个主题的最喜欢的帖子：

  • JavaScript 中变量的作用域是什么？
  • "this"关键字如何工作？
  • JavaScript 闭包是如何工作的？
this不是

有效的参数名称。将其更改为element并将其传递给自定义函数。

我不喜欢使用this，除非它在原型方法（或构造函数）中。

function somePluginAfterSelectFeatureOne(element, param ){
  // `element` is what you wanted `this` to be 
}
$('.some-element').somePlugin({
  afterSelect: function(param){
     somePluginAfterSelectFeatureOne(this, param);
  }
});

如果你真的想使用this，你可以使用Function.prototype.call 

function somePluginAfterSelectFeatureOne(param ){
    console.log(this); // The element that the event fired on 
}
$('.some-element').somePlugin({
  afterSelect: function(param){
     somePluginAfterSelectFeatureOne.call(this, param);
  }
});
相关文章：