如何通过bind()传递带参数的函数作为事件监听回调？

嘿，我来帮你搞清楚为什么你的bind版本只输出scrolled on 0，以及怎么用bind实现你想要的效果～

为什么原bind代码只输出0？ #

你遇到的问题核心在于bind的参数是立即求值并固定的：
当你执行window.addEventListener('scroll', scrollFunc.bind(this, pageYOffset))时，pageYOffset会在这一行代码执行的瞬间被计算出来——此时页面还没有滚动，值就是0。bind会把这个固定的0作为第一个参数绑定给scrollFunc，之后不管页面怎么滚动，触发回调时传给scrollFunc的都是这个预先绑定好的0，自然每次输出都是0啦。

用bind实现正确效果的方法 #

要让scrollFunc每次都拿到当前的滚动距离，我们不能直接把pageYOffset作为bind的参数，而是需要一个中间函数，让它在每次滚动事件触发时再动态获取当前的pageYOffset，然后传给scrollFunc。之后再用bind绑定这个中间函数（如果你的逻辑里需要固定this指向的话，这里如果不需要也可以省略bind，但为了符合你的需求，我们保留bind的用法）：

const scrollFunc = scrollY => { console.log(`scrolled on ${scrollY}`); };
// 中间函数：每次触发时获取当前的滚动距离，再传给scrollFunc
const scrollHandler = function() {
  scrollFunc(window.pageYOffset);
};
// 绑定中间函数的this（如果不需要this绑定，直接传scrollHandler也可以）
window.addEventListener('scroll', scrollHandler.bind(this));

这样每次滚动时，scrollHandler会被调用，它会实时获取当前的pageYOffset，再传递给scrollFunc，就能输出正确的滚动距离了。

和箭头函数写法的区别 #

你用箭头函数的写法() => scrollFunc(pageYOffset)之所以能正常工作，是因为箭头函数会在每次事件触发时才执行，这时候才会去计算pageYOffset的值，自然能拿到当前的滚动距离。本质上和上面的中间函数思路是一样的，只是箭头函数更简洁而已。

另外补充一点：事件监听器的回调函数默认会接收事件对象作为第一个参数，如果你用bind传递参数，这些参数会排在事件对象的前面。比如scrollFunc.bind(this, 'foo')会让scrollFunc的第一个参数是'foo'，第二个参数是事件对象，但这在你的场景里不是问题，核心还是参数的求值时机。

内容的提问来源于stack exchange，提问作者Natalia Davydova