Trong JavaScript, bind, call, và apply là các phương thức dùng để thiết lập ngữ cảnh (this) của một hàm. Dưới đây là sự khác nhau giữa chúng:

1. call()

  • Mô tả: Phương thức call cho phép bạn gọi một hàm với một ngữ cảnh (this) cụ thể và truyền tham số dưới dạng danh sách.
  • Cú pháp: function.call(thisArg, arg1, arg2, ...)
  • Ví dụ:
function greet(greeting) {
    console.log(`${greeting}, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello'); // In ra "Hello, Alice!"

2. apply()

  • Mô tả: Phương thức apply tương tự như call, nhưng nó cho phép bạn truyền các tham số dưới dạng một mảng.
  • Cú pháp: function.apply(thisArg, [argsArray])
  • Ví dụ:
function greet(greeting1, greeting2) {
    console.log(`${greeting1} and ${greeting2}, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', 'Hi']); // In ra "Hello and Hi, Alice!"

3. bind()

  • Mô tả: Phương thức bind tạo ra một hàm mới với ngữ cảnh (this) đã được thiết lập và có thể nhận tham số. Hàm mới này không được gọi ngay lập tức mà phải được gọi sau đó.
  • Cú pháp: function.bind(thisArg, arg1, arg2, ...)
  • Ví dụ:
function greet(greeting) {
    console.log(`${greeting}, ${this.name}!`);
}

const person = { name: 'Alice' };
const greetAlice = greet.bind(person);

greetAlice('Hello'); // In ra "Hello, Alice!"

Tóm tắt sự khác biệt

  • Gọi hàm:
    • call: Gọi hàm ngay lập tức với ngữ cảnh và tham số.
    • apply: Gọi hàm ngay lập tức với ngữ cảnh và tham số dưới dạng mảng.
    • bind: Tạo một hàm mới với ngữ cảnh đã thiết lập, nhưng không gọi hàm ngay lập tức.
  • Cách truyền tham số:
    • call: Truyền tham số dưới dạng danh sách.
    • apply: Truyền tham số dưới dạng mảng.
    • bind: Truyền tham số cho hàm mới được tạo ra.

Khi nào sử dụng?

  • Sử dụng call hoặc apply khi bạn muốn gọi hàm ngay lập tức với ngữ cảnh cụ thể.
  • Sử dụng bind khi bạn muốn tạo ra một hàm mới có ngữ cảnh cố định, có thể gọi sau đó.