Giá trị của `this` được xác định như thế nào?

Question

IT Interview Practice · Accepted Answer

`this` được quyết định bởi **cách một hàm được GỌI**, không phải nơi nó được định nghĩa. Có năm quy tắc:

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

obj.getX();          // 1   → gọi như method: `this` là `obj`
const f = obj.getX;
f();                  // undefined (hoặc window) → gọi thường: `this` là global/undefined
f.call(obj);          // 1   → binding tường minh với call/apply/bind
new SomeClass();      //     → `this` là instance mới toanh
```

## Ngoại lệ của arrow function (cái quan trọng)

Arrow function **không có `this` riêng** — chúng kế thừa `this` từ scope bao quanh tại thời điểm định nghĩa. Đó là lý do arrow rất hoàn hảo cho callback:

```js
const obj = {
  items: [1, 2],
  logAll() {
    // ✅ arrow kế thừa `this` từ logAll → `this` là obj
    this.items.forEach(i => console.log(this.items, i));

// ❌ một hàm thường ở đây sẽ có `this` riêng (undefined) → crash
    // this.items.forEach(function (i) { console.log(this.items); });
  },
};
```

## Cạm bẫy phổ biến

Truyền một method làm callback sẽ **làm mất** binding của nó, vì khi đó nó được gọi theo kiểu thường:

```js
button.addEventListener("click", obj.getX);        // ❌ `this` là button
button.addEventListener("click", () => obj.getX()); // ✅ giữ obj
button.addEventListener("click", obj.getX.bind(obj)); // ✅ cũng ổn
```

## Tại sao điều này quan trọng

Hiểu sai `this` là một trong những lỗi JS phổ biến nhất.

Cách khắc phục thường là một arrow function hoặc `.bind()` để khóa `this` mong muốn.

Ngoại lệ của arrow function (cái quan trọng)

Cạm bẫy phổ biến

Tại sao điều này quan trọng

Câu hỏi liên quan