Phân biệt call, apply và bind trong JavaScript

Gần đây, mình có đọc được cách sử dụng ba hàm call, apply và bind trong JavaScript.

Đọc xong thấy khó hiểu quá nên mình quyết định viết một bài so sánh về ba hàm này, cũng như cách sử dụng chúng.

Hy vọng bài viết sẽ giúp bạn phân biệt được call, apply và bind trong JavaScript.

Prototype của function

Ba hàm call, apply và bind là các prototype của Function. Nên chỉ có Function mới gọi được 3 hàm này.

Sở dĩ, một Function có thể gọi function khác vì trong JavaScript, Function cũng là một loại Object. Mà đã là Object thì sẽ có prototype, hay nói cách khác là gọi được phương thức của nó.

Bạn có thể tham khảo ba phương thức call, apply và bind tại các bài viết sau:

• Function.prototype.call()
• Function.prototype.apply()
• Function.prototype.bind()

Tóm tắt nội dung của 3 hàm

Bạn có thể nhớ nội dung của call, apply và bind một cách ngắn gọn như sau:

call

Gọi hàm và cho phép bạn truyền vào một object và các đối số phân cách nhau bởi dấu phẩy (Comma)

fun.call(thisArg, arg1, arg2, ...)

apply

Gọi hàm và cho phép bạn truyền vào một object và các đối số thông qua mảng (Array)

fun.apply(thisArg, [argsArray]);

bind

Trả về một hàm mới, cho phép bạn truyền vào một object và các đối số phân cách nhau bởi dấu phẩy.

let newFunction = fun.bind(thisArg[, arg1[, arg2[, ...]]])

So sánh call, apply và bind thông qua ví dụ

Hàm call

let person1 = { firstName: "Jon", lastName: "Kuperman" };
let person2 = { firstName: "Kelly", lastName: "King" };

function say(greeting1, greeting2) {
  console.log(
    greeting1 + "," + greeting2 + " " + this.firstName + " " + this.lastName
  );
}

say.call(person1, "Hello", "Good morning");
// Hello,Good morning Jon Kuperman

say.call(person2, "Hello", "Good morning");
// Hello,Good morning Kelly King

Hàm apply

let person1 = { firstName: "Jon", lastName: "Kuperman" };
let person2 = { firstName: "Kelly", lastName: "King" };

function say(greeting0, greeting1) {
  console.log(
    greeting0 + "," + greeting1 + " " + this.firstName + " " + this.lastName
  );
}

say.apply(person1, ["Hello", "Good moring"]);
// Hello,Good moring Jon Kuperman

say.apply(person2, ["Hello", "Good moring"]);
// Hello,Good moring Kelly King

Hàm bind

let person1 = { firstName: "Jon", lastName: "Kuperman" };
let person2 = { firstName: "Kelly", lastName: "King" };

function say(greeting0, greeting1) {
  console.log(
    greeting0 + "," + greeting1 + " " + this.firstName + " " + this.lastName
  );
}

let sayHelloJon = say.bind(person1, "Hello", "Good morning");
let sayHelloKelly = say.bind(person2, "Hello", "Good morning");

sayHelloJon(); // Hello,Good morning Jon Kuperman
sayHelloKelly(); // Hello,Good morning Kelly King

Kết luận

• Nhìn chung, hàm call và apply là gần giống nhau. Chúng đều gọi hàm trực tiếp. Chỉ khác ở cách truyền tham số vào (với call thì đối số phân cách bởi dấu phẩy comma và với apply thì đối số cho bởi mảng array)
• Hàm bind thì hơi khác hơn một chút. Hàm này không gọi hàm trực tiếp mà trả về một hàm mới. Sau đó, bạn có thể sử dụng hàm mới này. Về cách truyền tham số vào thì hàm bind giống với hàm call.

Trên đây là một số sự khác nhau giữa call, apply và bind trong JavaScript. Hy vọng là đủ để bạn phân biệt được call, apply và bind trong JavaScript và biết cách sử dụng chúng.

Tham khảo:

• Higher-Order Functions
• Hàm là gì? Hàm trong JavaScript
• Object là gì? Object trong JavaScript
• Phương thức của Object và this trong JavaScript