Binding to oninput event of an input element like so:
oninput: this.updateNote.bind(event, note)
where note is a simple object ({ completed: bool, text: string}) and event is the InputEvent.
I have defined updateNote as follows:
updateNote(note, event) {
...
}
It works with an oddity I can't explain.
The arguments for updateNote are in reverse order compared to the bind() call, yet note is the correct object and event is the InputEvent.
When you do
this.updateNote.bind(event, note) // (1)
you create a function boundFunc that accepts any number of arguments and calls updateNote with this equal to whatever the event variable happens to contain, one argument note and the rest of the args passed to boundFunc. So it's basically:
event = whatever
function boundFunc(...args) {
...updateNote.this = whatever...
updateNote(note, ...args)
}
Now, onInput expects a function and calls it with one argument, event. Since this function happens to be our boundFunc, it's called like this:
boundFunc(event) // (2)
and according to the above, "updateNote" is invoked like this
updateNote(note, event)
which explains the "reversed" thing. Actually, nothing is reversed. The "event" on the line (2) has nothing to do with "event" you've used on the bind line (1). That one probably contains some rubbish and is lost as long as you don't use this in "updateNote".
.bindis the newthisvalue, not the first argument to pass.bind()does. The values you pass to.bind()are actual values to be passed at the time the bound function is called. You cannot use.bind()to reverse the order of parameters to a function, in short.thisvalue, but I am wondering how that translates to updateNote working without issues with the arguments reversed.