将带有 bind() 和参数的函数作为回调传递

Question

我试图在事件侦听器概念中获得一个带有参数的传递函数作为回调。

这是我的代码：

 const scrollFunc = scrollY => { console.log(`scrolled on ${scrollY}`); }; window.addEventListener('scroll', scrollFunc.bind(this, pageYOffset));

 html, body { min-height: 110vh; }

我只是不明白为什么它只记录scrolled on 0结果以及如何正确绑定它。

我知道我可以像这样重写这个函数，它会起作用：

const scrollFunc = scrollY => {

    console.log(`scrolled on ${scrollY}`);

};

window.addEventListener('scroll', () => scrollFunc(pageYOffset));

但我仍然真的需要了解如何修复.bind()版本。

Answer 1

myfunc.bind(thisArg, 'hello')将创建一个函数，其词法上下文this绑定到thisArg （在使用箭头函数时这是无用的）并且第一个参数将始终是"hello" 。 因此，在您的情况下，第一个参数将始终是pageYOffset的值，即0 。 与其将它作为参数，不如在箭头函数中引用它的值。

window.addEventListener("scroll" , () => console.log(pageYOffset));

会做你想做的。

Answer 2

您的两个代码版本之间的主要区别在于pageYoffset的值将被拾取以用于实际调用scrollFunc 。 在带有.bind的版本中，该值在您执行addEventListener确定。 在另一个版本中，该值仅在滚动事件触发时确定。

你不能真正修复.bind版本，而不放弃.bind本身（你已经成功做到了），因为显然pageYoffset在你执行.bind() pageYoffset没有合适的值。