Giải thích Function.prototype.bind trong javascript?

Question

Nguyễn Tiến Tuân · Accepted Answer

Function.prototype.bind là một phương thức trong JavaScript cho phép bạn tạo một phiên bản mới của một hàm, với this được gán cố định (bound) và có thể truyền các đối số ban đầu cho hàm đó. Điều này rất hữu ích khi bạn muốn kiểm soát ngữ cảnh (this) của hàm khi nó được gọi.
Cú Pháp
let newFunction = originalFunction.bind(thisArg&#x5B;, arg1&#x5B;, arg2&#x5B;, ...]]]);
Tham Số
thisArg: Giá trị mà bạn muốn gán cho this trong hàm được gọi.
arg1, arg2, ... (tùy chọn): Các đối số ban đầu sẽ được truyền vào hàm khi nó được gọi.
Ví Dụ Cụ Thể
1. Gán this cho một hàm
const person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
const greetAlice = person.greet.bind(person);
greetAlice(); // Kết quả: Hello, my name is Alice
Trong ví dụ này, hàm greet sẽ luôn sử dụng this là đối tượng person, bất kể nó được gọi từ đâu.
2. Truyền các đối số ban đầu
function multiply(a, b) {
    return a * b;
}
const double = multiply.bind(null, 2); // Gán a là 2
console.log(double(5)); // Kết quả: 10
Ở đây, hàm double đã được gán this là null và giá trị đầu vào đầu tiên (a) là 2. Khi gọi double(5), nó thực chất là multiply(2, 5).
3. Sử Dụng trong Class
Khi làm việc với các lớp (class), bind thường được sử dụng để đảm bảo rằng các phương thức có thể truy cập đúng ngữ cảnh của this.
class Counter {
    constructor() {
        this.count = 0;
        this.increment = this.increment.bind(this); // Gán ngữ cảnh
    }
    increment() {
        this.count++;
        console.log(this.count);
    }
}
const counter = new Counter();
const incrementFunc = counter.increment;
incrementFunc(); // Kết quả: 1
Nếu không có bind, khi gọi incrementFunc(), giá trị của this sẽ không phải là đối tượng Counter.
4. Đặc Điểm Khác
Khả năng sử dụng với các hàm có nhiều tham số: Bạn có thể gán nhiều tham số cho hàm với bind và chỉ định các tham số đầu vào.
Trả về một hàm mới: bind không thay đổi hàm gốc mà trả về một hàm mới đã được gán ngữ cảnh.
Không áp dụng cho các hàm mũi tên: Các hàm mũi tên không có this riêng của chúng. Chúng sẽ sử dụng giá trị của this từ ngữ cảnh bao quanh nơi chúng được định nghĩa.
Kết Luận
Phương thức Function.prototype.bind là một công cụ mạnh mẽ để kiểm soát ngữ cảnh (this) trong JavaScript, đặc biệt hữu ích trong các tình huống mà bạn muốn truyền một hàm như một callback hoặc khi làm việc với các lớp. Bằng cách sử dụng bind, bạn có thể dễ dàng tạo ra các hàm mới với ngữ cảnh được xác định trước, giúp mã của bạn trở nên rõ ràng và dễ bảo trì hơn.