为何$('.button').click(window.location.reload)触发非法调用，匿名函数写法正常？

这个问题问到了JavaScript函数上下文绑定的核心点，咱们直接拆解两者的差异：

1. 直接传递window.location.reload的问题 #

当你执行$('.button').click(window.location.reload)时，本质是把reload函数作为独立引用传给了jQuery的click方法。

jQuery触发点击事件时，会调用这个回调函数，但会强制把函数的this指向触发事件的DOM元素（也就是你的.button按钮）。而reload是window.location对象的专属方法，它内部逻辑完全依赖this指向window.location。当this变成普通按钮元素时，调用reload就会因为上下文不匹配抛出「非法调用」错误——就像硬让按钮去执行只有浏览器地址栏才有的方法，肯定行不通。

2. 匿名函数包裹的写法为什么能正常运行 #

而$('.button').click(function(){ window.location.reload() })的逻辑完全不同：

• 匿名函数作为回调被jQuery调用时，它的this确实还是按钮元素，但这没关系——因为我们在匿名函数内部，是通过window.location.reload()这种「方法调用」形式执行的。
• 用.操作符调用方法时，JavaScript会自动把.左边的对象（window.location）绑定为该方法的this。所以这里reload执行时的上下文完全正确，自然能正常刷新页面。

额外的替代方案 #

如果你不想用匿名函数，也可以用bind方法固定reload的上下文：

$('.button').click(window.location.reload.bind(window.location))

bind会返回一个新函数，这个新函数的this会永久绑定到window.location上，不管jQuery怎么调用它，上下文都是对的，同样能解决问题。

内容的提问来源于stack exchange，提问作者G.Bar