为何location.reload直接传入addEventListener点击时报Illegal Invocation错误？

这是个很常见的JavaScript上下文绑定问题，我来给你拆解清楚：

第一种写法报错的原因 #

当你写下：

var e = document.getElementById('a');
e.addEventListener('click', location.reload);

你其实是把location.reload这个函数本身作为回调传递给了事件监听器。但JavaScript中，方法的执行依赖于它的上下文（也就是this指向）——reload是location对象的专属方法，它必须在location的上下文里才能正常运行。

而事件监听器在触发回调时，会自动把this绑定到触发事件的DOM元素（也就是你的按钮e）。这时候调用reload，相当于你在按钮元素上调用了一个根本不属于它的方法，浏览器自然会抛出Uncaught TypeError: Illegal Invocation错误。

第二种写法可行的原因 #

当你用匿名函数包裹location.reload()时：

var e = document.getElementById('a');
e.addEventListener('click',function(){location.reload()});

匿名函数作为回调，它的this确实还是按钮，但你在函数内部是直接通过location对象调用reload方法的。这时候reload的上下文依然牢牢绑定在location上，完全符合它的执行要求，所以能正常触发文档重载。

另一种更简洁的解决方案 #

你还可以用bind方法手动把reload的上下文绑定到location，这样不用写匿名函数也能正常工作：

var e = document.getElementById('a');
e.addEventListener('click', location.reload.bind(location));

bind会返回一个新函数，这个新函数的this被永久固定为location，不管它被哪里调用，都能正确执行。

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