面试题：JavaScript事件处理中的this上下文：常规函数中的this指向

Question

在JavaScript事件处理中，有如下代码：`<button id='btn'>点击</button>`，`const btn = document.getElementById('btn'); function handleClick() { console.log(this); } btn.addEventListener('click', handleClick);` 请问在`handleClick`函数中`this`指向什么？如果将`handleClick`函数改为箭头函数，`this`又指向什么？

Answer 1

1. 普通函数的情况： 在handleClick普通函数中，this指向触发点击事件的DOM元素，即<button id='btn'>元素。这是因为在DOM事件处理程序中，当使用addEventListener绑定事件时，普通函数中的this会自动指向触发事件的元素。
2. 箭头函数的情况： 如果将handleClick函数改为箭头函数，function handleClick() { console.log(this); }变为const handleClick = () => console.log(this);，此时this指向的是定义箭头函数时所在的作用域中的this。在这个例子中，定义箭头函数在全局作用域（假设没有在其他函数内部定义），那么this指向全局对象window（在浏览器环境中）。箭头函数没有自己的this，它的this是从定义时的外层作用域继承而来的。