Phương thức bind(), call(), và apply() trong JavaScript

Trong lập trình JavaScript, phương thức bind(), call(), và apply() là ba phương thức quan trọng và mạnh mẽ, được sử dụng để thay đổi ngữ cảnh của một hàm và cách nó được gọi. Mặc dù chúng có các mục tiêu và cách sử dụng khác nhau, nhưng tất cả đều cung cấp một cách để thay đổi giá trị của từ khóa "this" trong một hàm.

Trong bài viết này, mình sẽ tìm hiểu chi tiết về cách hoạt động của các phương thức bind(), call(), và apply(), cũng như những tình huống mà bạn nên sử dụng chúng. Mình cũng sẽ thảo luận về sự khác biệt giữa ba phương thức này và cách chúng có thể cải thiện tính linh hoạt và tái sử dụng trong mã JavaScript của bạn.

Phương thức bind() trong JavaScript

Phương thức bind() tạo ra một bản sao của một hàm và gắn ngữ cảnh của hàm này vào một đối tượng cụ thể, mà sau đó có thể được gọi với ngữ cảnh đã được xác định.

Gọi phương thức bind() trên một hàm và truyền đối tượng mà bạn muốn gắn ngữ cảnh vào.

Bài viết này được đăng tại [free tuts .net]

Ví dụ:

const person = {
    name: 'John',
    greet: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

const greetJohn = person.greet.bind(person);
greetJohn(); // Hello, John!

Phương thức call() trong JavaScript

Phương thức call() gọi một hàm và gắn ngữ cảnh của hàm này vào một đối tượng cụ thể, nhưng nó gọi hàm ngay lập tức.

Gọi phương thức call() trên một hàm và truyền đối tượng mà bạn muốn gắn ngữ cảnh vào, sau đó là các đối số của hàm.

Ví dụ:

const person1 = {
    name: 'John'
};

const person2 = {
    name: 'Alice'
};

function greet() {
    console.log(`Hello, ${this.name}!`);
}

greet.call(person1); // Hello, John!
greet.call(person2); // Hello, Alice!

Phương Thức apply() trong JavaScript

Phương thức apply() cũng giống như call(), nhưng nó nhận một mảng các đối số thay vì các đối số độc lập.

Gọi phương thức apply() trên một hàm và truyền đối tượng mà bạn muốn gắn ngữ cảnh vào, sau đó là một mảng các đối số của hàm.

Ví dụ:

const person1 = {
    name: 'John'
};

const person2 = {
    name: 'Alice'
};

function greet(message) {
    console.log(`${message}, ${this.name}!`);
}

greet.apply(person1, ['Hello']); // Hello, John!
greet.apply(person2, ['Hi']);    // Hi, Alice!

Phương thức bind(), call(), và apply() là cách để thay đổi ngữ cảnh của một hàm trong JavaScript. Mỗi phương thức có cách sử dụng và ứng dụng riêng, nhưng chúng đều giúp bạn kiểm soát ngữ cảnh khi gọi hàm và làm cho mã JavaScript trở nên linh hoạt hơn.

Khi nào nên sử dụng các phương thức bind(), call(), và apply() trong JavaScript?

Các phương thức bind(), call(), và apply() trong JavaScript đều được sử dụng để thay đổi ngữ cảnh (context) của một hàm. Dưới đây là hướng dẫn về khi nào nên sử dụng từng phương thức:

Khi nào nên sử dụng:

Phương Thức bind():

Khi bạn muốn gắn ngữ cảnh một cách cụ thể:

• Khi bạn muốn tạo một bản sao của một hàm và gắn ngữ cảnh của nó vào một đối tượng cụ thể.

Khi bạn muốn lưu trữ một hàm với ngữ cảnh đã được xác định:

• Khi bạn muốn lưu trữ một hàm với ngữ cảnh đã được xác định và gọi nó sau này mà không cần phải ghi đè hoặc thay đổi ngữ cảnh.

Phương Thức call():

Khi bạn muốn gọi hàm ngay lập tức với ngữ cảnh cụ thể:

• Khi bạn muốn gọi hàm ngay lập tức và gắn ngữ cảnh của nó vào một đối tượng cụ thể.

Khi bạn muốn truyền các đối số cho hàm một cách cụ thể:

• Khi bạn muốn truyền các đối số cho hàm một cách cụ thể và riêng lẻ.

Phương Thức apply():

Khi bạn muốn gọi hàm ngay lập tức với ngữ cảnh cụ thể:

• Khi bạn muốn gọi hàm ngay lập tức và gắn ngữ cảnh của nó vào một đối tượng cụ thể.

Khi bạn muốn truyền một mảng các đối số cho hàm:

• Khi bạn muốn truyền một mảng các đối số cho hàm.
• Đặc biệt hữu ích khi số lượng đối số của hàm là biến đổi hoặc không xác định trước.

Lưu ý:

• bind(): Sử dụng khi bạn muốn tạo ra một bản sao của hàm với ngữ cảnh đã được xác định và gọi nó sau này mà không cần thay đổi ngữ cảnh.
• call(): Sử dụng khi bạn muốn gọi hàm ngay lập tức với ngữ cảnh cụ thể và truyền các đối số cho hàm một cách riêng lẻ.
• apply(): Sử dụng khi bạn muốn gọi hàm ngay lập tức với ngữ cảnh cụ thể và truyền một mảng các đối số cho hàm, đặc biệt hữu ích khi số lượng đối số của hàm là biến đổi hoặc không xác định trước.

Kết bài

Phương thức bind(), call(), và apply() là cách để thay đổi ngữ cảnh của một hàm trong JavaScript. Mỗi phương thức có cách sử dụng và ứng dụng riêng, nhưng chúng đều giúp bạn kiểm soát ngữ cảnh khi gọi hàm và làm cho mã JavaScript trở nên linh hoạt hơn.