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

Cập nhật ngày 20/12/2021

Gần đây, mình có đọc được cách sử dụng ba hàm call, applybind 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, applybind 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, applybind tại các bài viết sau:

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

Bạn có thể nhớ nội dung của call, applybind 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 callapply 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, applybind trong JavaScript. Hy vọng là đủ để bạn phân biệt được call, applybind trong JavaScript và biết cách sử dụng chúng.

Tham khảo:

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

Làm sao để bắt buộc truyền tham số vào hàm?
Phân biệt arrow function và function trong JavaScript
Chia sẻ:

Bình luận