Mất ngữ cảnh trong mã phương thức của OOP trong JavaScript

Khi sử dụng mã nguồn của một phương thức lớp, ngữ cảnh có thể bị mất. Hãy cùng xem xét một ví dụ. Giả sử chúng ta có lớp sau:

javascriptclass User {
  #name;
  
  constructor(name) {
    this.#name = name;
  }
  getName() {
    return this.#name;
  }
}

Hãy tạo một đối tượng của lớp này:

javascriptlet user = new User('john');

Gán mã phương thức vào một biến:

javascriptlet func = user.getName;

Vào thời điểm gán phương thức vào biến, ngữ cảnh đã bị mất. Bây giờ this bên trong mã phương thức sẽ không trỏ đến đối tượng của lớp. Hãy kiểm tra bằng cách gọi hàm của chúng ta:

javascriptconsole.log(func()); // lỗi

Để giải quyết vấn đề, có thể ràng buộc ngữ cảnh vào hàm, ví dụ, thông qua bind:

javascriptfunc = func.bind(user);
console.log(func()); // hoạt động