如何在不丢失“this”引用的情况下使用绑定？

Question

有没有办法在不丢失事件处理程序提供的this 绑定的情况下将附加参数部分应用于函数。 bind 需要 this 值，因此将 null 作为第一个参数会丢失对 DOM 元素 <button>Click</button> 的引用，否则会出现该引用。最好提供像 bind 允许这样的附加参数而不会丢失对元素的引用

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，而不是将其替换为对元素的引用.

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

Answer 1

必须成为这个的欺骗目标。基本上，你必须写一个“咖喱”函数：

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

该函数创建并返回一个函数，该函数在调用时调用原始传递的 this，它提供了 curried 参数，然后是提供给调用 curried 函数的参数。 curried 函数返回调用原始函数的结果，以便调用者看到该结果。

现场示例：

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

class Example {
    constructor(name) {
        this.name = name;
        this.withArgs = partial(this.method, 1);
    }
    method(a, b, c) {
        console.log(`this.name = ${this.name}, ${a}, ${b}, ${c}`);
    }
}

const e = new Example("example");
e.withArgs(2, 3); // this.name = example, 1, 2, 3