解释下 JavaScript 中 this 是如何工作的？

在 JavaScript 中，this 关键字指的是当前执行上下文中的对象。它的值取决于函数被调用时的方式。

具体来说，有以下几种情况：

1. 全局环境中的 this

在全局环境中，this 指向全局对象（浏览器中是 window，Node.js 中是 global）。

2. 函数中的 this

当函数作为对象的方法被调用时，this 指向该对象。例如：

const obj = {
  name: 'Tom',
  sayName() {
    console.log(this.name);
  }
};
obj.sayName(); // 输出 'Tom'

如果函数不作为对象的方法被调用，而是作为普通函数调用，则 this 指向全局对象。例如：

function sayName() {
  console.log(this.name);
}
const name = 'Tom';
sayName(); // 输出 'undefined'

可以使用 call、apply 或 bind 方法改变函数中 this 的指向。

3. 构造函数中的 this

当使用 new 运算符调用一个构造函数时，this 指向新创建的对象实例。例如：

function Person(name) {
  this.name = name;
}
const person = new Person('Tom');
console.log(person.name); // 输出 'Tom'

4. DOM 事件中的 this

当在 DOM 事件处理函数中使用 this 时，this 指向触发事件的元素。例如：

document.getElementById('btn').addEventListener('click', function() {
  console.log(this); // 输出按钮元素
});

需要注意的是，箭头函数中的 this 指向外层作用域中的 this，而不是当前执行上下文中的对象。