Vì sao `const fn = obj.method; fn()` lại mất `this`? Có mấy cách sửa?

Vì this trong JavaScript được quyết định lúc gọi hàm, không phải lúc định nghĩa.

Khi gán method ra biến, bạn chỉ lấy tham chiếu tới hàm, phần "chủ thể gọi" (obj.) không đi kèm.
Gọi trần fn() thì this là undefined ở strict mode / module (hoặc globalThis ở sloppy mode).

const counter = {
  count: 0,
  inc() { this.count++; },
};

counter.inc();                 // OK — this = counter
const inc = counter.inc;
inc();                         // TypeError: Cannot read properties of undefined

setTimeout(counter.inc, 100);  // cùng lỗi — callback được gọi trần

Ba cách sửa:

const bound = counter.inc.bind(counter);      // 1. bind — tạo hàm mới cố định this
setTimeout(() => counter.inc(), 100);         // 2. arrow wrapper — giữ nguyên lời gọi obj.method()

class Counter {
  count = 0;
  inc = () => { this.count++; };              // 3. class field arrow — this lấy từ scope tạo instance
}

Đây là nguyên nhân kinh điển của lỗi Cannot read properties of undefined khi truyền method làm callback cho addEventListener, map, hay props React.

Cách 2 thường được ưu tiên vì rõ ràng và không tạo hàm bind rải rác.

Xem toàn bộ JavaScript cùng filter theo level & chủ đề con.

Mở danh sách JavaScript

Vì this trong JavaScript được quyết định lúc gọi hàm, không phải lúc định nghĩa.

Khi gán method ra biến, bạn chỉ lấy tham chiếu tới hàm, phần "chủ thể gọi" (obj.) không đi kèm.
Gọi trần fn() thì this là undefined ở strict mode / module (hoặc globalThis ở sloppy mode).

const counter = {
  count: 0,
  inc() { this.count++; },
};

counter.inc();                 // OK — this = counter
const inc = counter.inc;
inc();                         // TypeError: Cannot read properties of undefined

setTimeout(counter.inc, 100);  // cùng lỗi — callback được gọi trần

Ba cách sửa:

const bound = counter.inc.bind(counter);      // 1. bind — tạo hàm mới cố định this
setTimeout(() => counter.inc(), 100);         // 2. arrow wrapper — giữ nguyên lời gọi obj.method()

class Counter {
  count = 0;
  inc = () => { this.count++; };              // 3. class field arrow — this lấy từ scope tạo instance
}

Đây là nguyên nhân kinh điển của lỗi Cannot read properties of undefined khi truyền method làm callback cho addEventListener, map, hay props React.

Cách 2 thường được ưu tiên vì rõ ràng và không tạo hàm bind rải rác.