javascript - 如何使用bind而不丢失 `this`引用？

Question

有没有办法将附加参数部分应用于函数而不丢失 this由事件处理程序给出的绑定(bind)。 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 即可达到效果作为绑定(bind)的第一个参数，但我感兴趣的是不“丢失”绑定(bind) this ，而不是将其替换为对元素的引用。

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

Answer 1

为此必须有一个欺骗目标。基本上，你必须编写一个“柯里化(Currying)”函数:

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

该函数创建并返回一个函数，该函数在被调用时调用原始函数，传递调用它的 this ，提供柯里化(Currying)参数，后跟提供给柯里化(Currying)函数调用的参数。柯里化(Currying)函数返回调用原始函数的结果，以便调用者可以看到该结果。

实例:

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