如何在不丢失“ this”参考的情况下使用bind？

Question

有没有一种方法可以部分地将附加参数应用于函数，而又不会丢失this事件处理程序给定的绑定。bind需要一个this值，因此将null作为第一个参数将丢失对<button>Click</button>原本会存在的DOM元素的引用。最好在bind不丢失对元素的引用的情况下提供诸如allow之类的附加参数

const button = document.querySelector('button')
function once(...args) {
  console.log(...args, this) // {prop: 'val'}, event, `Window`
  button.removeEventListener('click', bound)
}
const extraArgs = {
  prop: 'val'
}
const bound = once.bind(null, extraArgs)
button.addEventListener('click', bound)

<button>Click</button>

在此示例中，可以通过仅button作为绑定的第一个参数传入来实现效果，但是我有兴趣不“丢失”该绑定this，而不用对元素的引用替换它。

如何在不丢失thisDOM元素绑定的情况下向函数提供额外的参数？

Answer 1

有有成为这个dupetarget。基本上，您必须编写一个“ curry”函数：

function curry(fn, ...args1) {
    return function(...args2) {
        return fn.call(this, ...args1, ...args2);
    };
}

该函数创建并返回一个函数，该函数在被调用时调用原始函数，并传递被调用的原始函数，this并提供咖喱参数，然后再提供给咖喱函数调用的参数。curried函数返回调用原始文件的结果，以便调用者可以看到该结果。

现场示例：

function curry(fn, ...args1) {
    return function(...args2) {
        return fn.call(this, ...args1, ...args2);
    };
}