Javascript 绑定(bind)函数未按预期传递参数

Question

我希望有人能够解释从事件监听器将多个参数传递给函数时的绑定(bind)行为。我找不到任何可以解释的内容。

我有一个按钮，它执行 JS 函数 onclick。当我设置事件监听器时，我试图将一些参数绑定(bind)到函数。

每当执行该函数时，“CategoryId”都会正确通过，但“SubheadingText”会作为事件对象通过，“event”也是如此。

bind 这样做有什么原因吗？第二个事件对象从哪里来？

下面的JS代码

Fiddle 可以在这里找到:http://jsfiddle.net/8w5geqxj/12/

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

faqCategoryButtons.addEventListener('click', categoryNavigation.bind(categoryId, subheadingText, event));

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

Answer 1

Bind第一个参数always将是您尝试绑定(bind)“this”对象的函数，即分配给您的函数所具有的参数的以下值。如果您检查您的 Fiddle ，单击按钮后，您将获得以下值:

this:           "mycatid",
categoryId:    "my cat text"
subheadingText: Event
event:          MouseEvent

所以，为了使代码按预期工作:

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

faqCategoryButtons.addEventListener('click', categoryNavigation.bind(null, categoryId, subheadingText, event));

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

在这种情况下，我添加了一个额外的“null”以使其工作，因为我知道您没有使用“this”，但是，您可以添加任何值，它将成为函数的“this”。

编辑:回复评论的问题

It looks like even though when I bind the parameters to the function it needs to be in this order categoryNavigation.bind(null, categoryId, subheadingText, event) But when I define the function, the parameters need to be in this order categoryNavigation(categoryId, subheadingText, context, event){} Is that expected behaviour that the arguments get rearranged when the function is called?

正如我在回答中提到的，进行绑定(bind)时的第一个参数是“this”，我称之为上下文，这就是函数所做的真正的“重新排列”。除此之外，参数的顺序是相同的。然而，需要考虑的是，“bind”返回的函数的参数已经“绑定(bind)”到旧函数，并且应该再次调用它。

在您的例子中，您绑定(bind)了null、categoryId、subheadingText、event。然而，在显示的代码中，只定义了categoryId和subheadingText，但没有定义event。这意味着您在那里绑定(bind)的事件从技术上讲应该是“未定义”的 - 但可能是代码此时具有的随机事件值 - 。另一方面，click 确实返回自己的“事件”值作为参数，因此最终，在您的代码中，您有一个单击事件，它将调用您事先绑定(bind)的函数 "null, cathegoryId, subheadingText, "，当事件发生时，会调用该事件并将点击事件放置在那里(但没有空间放置该事件，因为所有参数都已定义)

换句话说，您的代码(在 this 绑定(bind)修复之后)

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

faqCategoryButtons.addEventListener('click', categoryNavigation.bind(null, categoryId, subheadingText, event));

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

相当于:

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

function categoryNavigationBinded(eventForTheclick){
    const categoryNavigationThis = cagegoryNavigation.bind(null); // in the fixed code, categoryNavigation has its "this = null" 
    categoryNavigationThis(categoryId, subheadingText, event) // note that event is not defined, and for what I know is "undefined"
}

faqCategoryButtons.addEventListener('click', categoryNavigationBinded);

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

对于代码，我想你想做这样的事情:

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

function categoryNavigationBinded(eventForTheclick){
    const categoryNavigationThis = cagegoryNavigation.bind(null); // in the fixed code, categoryNavigation has its "this = null" 
    categoryNavigationThis(categoryId, subheadingText, eventForTheclick) // here I am placing the click's event into the 3rd categoryNavigation parameter
}

faqCategoryButtons.addEventListener('click', categoryNavigationBinded);

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

这将是“扩展”版本，因此我可以解释会发生什么，并且以与您在代码中相同的方式使用绑定(bind)的“短版本”将是:

var faqCategoryButtons = document.getElementsByClassName('button-faq-cat')[0];
var categoryId = 'mycatid';
var subheadingText = 'my cat text';

faqCategoryButtons.addEventListener('click', categoryNavigation.bind(null, categoryId, subheadingText)); // the last parameter, "event", will be the parameter the click will place its own event

function categoryNavigation(categoryId, subheadingText, event){
  if (event && event.preventDefault) {
    event.preventDefault();
  } else if (event) {
    event.returnValue = false;
  }
}

TLDR:除了第一个“this”之外，参数在绑定(bind)中并没有真正重新组织，但是在您的代码中，您在真正拥有真实事件值之前定义了“event”参数，因此它“丢失”(并在单击时作为“第 5 个”参数发送)