Question

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

我真的想将每个功能更改分成它自己的一组功能。

我想知道的是如何最好地处理“this”参考。由于我想要附加到每个回调的多个函数，我假设我需要一个匿名函数用于调用其他函数的每个选项。我只是将“this”引用作为参数传递给我的函数，还是有更好的方法来执行此操作？

function somePluginAfterSelectFeatureOne(this, param ){
  // do stuff
}

function somePluginAfterSelectFeatureTwo(this, param){
  // do stuff
}

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

Answer 1

是的我会推荐“应用”或关闭 - 我不确定性能如何...我几乎不记得有什么理由为什么closuers工作比绑定“this”更好，但我不相信有一个真实的什么是你想要的大不了的。并且闭包并不总是有意义的，因为它与应用程序的架构/设计紧密相关。

首先 - 我永远不会将“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”传递给被调用函数，并且仍然可以传递所有正常参数 - ＆gt;这只是“申请”的第二个参数。但请注意，使用apply时 - ＆gt;所有params必须作为一个数组传递（因为内部的“arguments”参数，总是在每个函数调用中都可用，实际上是一个内部数组）

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

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

     myFunction(param);         
  }
});

正如您所看到的 - 我们只是将“this”存储为名为“_self”的局部变量。现在，如果函数定义与上面的函数定义相同 - >即使没有通过它，也可以使用“_self”（这就是我们所谓的“封闭”;））。

但是你也可以看到 - 它并不总是有意义的......在你的例子中，你将被迫在你的“afterSelect”函数中移动函数定义，这完全不是这里的目标。 / p>

所以，我会选择“应用”模式，然后很好地传递“this” - 有点像“委托”;）

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

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

我在这里也得到了关于这两个主题的一些受欢迎的主题：

Answer 2

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

jQuery多个回调“this”引用

2 个答案: