为什么JavaScript的bind()调用会颠倒函数的参数顺序？

Question

像这样将input元素绑定到oninput事件:

oninput: this.updateNote.bind(event, note)

其中note是一个简单的对象({completed: bool, text: string})，event是InputEvent。

我将updateNote定义如下:

updateNote(note, event) {
...
}

它以一种我无法解释的怪异方式工作。

updateNote的参数与bind()调用相比顺序相反，但是note是正确的对象，而event是InputEvent。

- Dan P

---

.bind 方法的第一个参数是新的 this 值，而不是要传递的第一个参数。 - CertainPerformance

没错，而且你可能误解了 .bind() 的作用。你传递给 .bind() 的值是在调用绑定函数时要传递的实际值。简而言之，你不能使用 .bind() 来反转函数参数的顺序。 - Pointy

如果您能解释一下您实际想要完成的目标，那可能会有所帮助。 - Pointy

我想确保updateNote()获取所有必需的信息，因此需要使用bind()调用。如果我只是将oninput属性设置为this.updateNote，我将无法同时获取笔记和InputEvent值。 - Dan P

我知道bind的第一个参数设置了新的this值，但我想知道这如何转换为updateNote在参数颠倒的情况下正常工作。 - Dan P

Answer 1

当你执行

时

this.updateNote.bind(event, note)   // (1)

您需要创建一个函数boundFunc，该函数接受任意数量的参数，并使用event变量包含的内容作为this，一个参数note和传递给boundFunc的其余参数调用updateNote。因此基本上是这样的：

event = whatever

function boundFunc(...args) {
    ...updateNote.this = whatever...
    updateNote(note, ...args)
}

现在，onInput 需要一个函数，并使用一个参数 event 调用它。由于这个函数恰好是我们的 boundFunc，所以它会像这样被调用：

boundFunc(event)   // (2)

根据上述内容，“updateNote”是这样调用的。

updateNote(note, event)

这是关于“reversed”的解释。实际上没有什么是倒转的。第二行的“event”和第一行使用的“bind”中的“event”没有任何关系。那个可能包含了一些垃圾，只要你不在“updateNote”中使用this 就会丢失。

- georg