`this` 的值是如何确定的?

Question

`this` 的值是如何确定的?

Accepted Answer

`this` 由**函数是如何被调用的**决定，而不是它在哪里定义的。有五条规则：

```js
const obj = {
  x: 1,
  getX() { return this.x; },
};

obj.getX();          // 1   → method call: `this` is `obj`
const f = obj.getX;
f();                  // undefined (or window) → plain call: `this` is global/undefined
f.call(obj);          // 1   → explicit binding with call/apply/bind
new SomeClass();      //     → `this` is the brand-new instance
```

## 箭头函数例外（重要的一个）

箭头函数**没有自己的 `this`** — 它们在定义时从周围作用域继承它。这就是为什么箭头函数非常适合作为回调函数：

```js
const obj = {
  items: [1, 2],
  logAll() {
    // ✅ arrow inherits `this` from logAll → `this` is obj
    this.items.forEach(i => console.log(this.items, i));

// ❌ a regular function here would have its own `this` (undefined) → crash
    // this.items.forEach(function (i) { console.log(this.items); });
  },
};
```

## 常见的陷阱

将方法作为回调函数传递会**失去**它的绑定，因为之后它被普通地调用：

```js
button.addEventListener("click", obj.getX);        // ❌ `this` is the button
button.addEventListener("click", () => obj.getX()); // ✅ keeps obj
button.addEventListener("click", obj.getX.bind(obj)); // ✅ also fine
```

## 为什么这很重要

误解 `this` 是最常见的 JS bug 之一。

修复通常是使用箭头函数或 `.bind()` 来锁定所需的 `this`。