Facebook Pixel

Tìm hiểu các phương thức call, apply, bind trong JavaScript

29 Aug, 2021

Trong bài "Tìm hiểu về this trong JavaScript", chúng ta có sử dụng phương thức bind() để fix một số bug khi sử dụng this. Cụ thể nó là phương thức như thế nào thì chúng ta cùng nhau tìm hiểu trong bài này nhé 😉.

Tìm hiểu các phương thức call, apply, bind trong JavaScript

Mục Lục

Trong bài "Tìm hiểu về this trong JavaScript", chúng ta có sử dụng phương thức bind() để fix một số bug khi sử dụng this. Cụ thể nó là phương thức như thế nào thì chúng ta cùng nhau tìm hiểu trong bài này nhé 😉.

Như các bạn biết đấy, trong JavaScript, function cũng được xem là một object, do đó nó cũng có các phương thức hữu ích như: call(), apply()bind(). Ba ông thần này hiện tại bạn sẽ thấy ít khi mà dùng nó, tuy nhiên nếu trở thành dev JavaScript lành nghề thì chắc chắn các bạn phải nắm rõ chúng khi làm việc với NodeJSMongodb.

Lưu ý: Trước khi đi tiếp tục tìm hiểu các phương thức này, nếu chưa biết hoặc chưa nắm rõ kiến thức về ông thần this thì mình khuyên bạn nên tìm đọc lại bài viết "Tìm hiểu về this trong JavaScript" của mình để nắm rõ hơn rồi quay lại nhé 😁.

I. Call() method.

Phương thức call() cho phép bạn gọi function và truyền vào một object và các đối số(argument) cách nhau bởi dấu phẩy (Comma).

Cú pháp của call() như sau:

Javascript
function.call(thisArg, arg_1, arg_2,...);

Ví dụ:

Javascript
let person = {
	firstName: "Ken",
    lastName: "Kaneki",
}

function saySomeThing(param_1, param_2) {
	console.log(param_1 + " " + param_2 + ", " + this.firstName + " " + this.lastName);
}

saySomeThing.call(person, "Welcome to", "200Lab");
//-->Output: Welcome to 200Lab, Ken Kaneki

II. Apply() method.

Phương thức apply() cũng tương tự như call(), nhưng nó khác ở chỗ nó truyền vào các đối số thông qua mảng, cú pháp của nó như sau:

Javascript
function.apply(thisArg, [argsArray]);

Cùng xem ví dụ cho dễ hiểu nhé 😉

Javascript
let person = {
	firstName: "Ken",
    lastName: "Kaneki",
}

function saySomeThing(param_1, param_2) {
	console.log(param_1 + " " + param_2 + ", " + this.firstName + " " + this.lastName);
}

saySomeThing.apply(person, ["Welcome to", "200Lab"]);
//-->Output: Welcome to 200Lab, Ken Kaneki

III. Bind() method.

Phương thức bind() có chút đặc biệt hơn, nó trả về một function mới, nó cũng cho phép ta truyền vào một objectb và các đối số ngăn cách nhau bởi dấu phẩy, cú pháp của bind() như sau.

Javascript
let newFunction = func.bind(thisArg[, arg1[, arg2[, ...]]]);

Ví dụ:

Javascript
let person = {
	firstName: "Steve",
    lastName: "Rogers",
};

function saySomeThing(param_1, param_2) {
	console.log(param_1 + " " + param_2 + ", " + this.firstName + " " + this.lastName);
}

const say = saySomeThing.bind(person, "Hello", "captain");
say();
//-->Output: Hello captain, Steve Rogers
Một lưu ý chung cho cả ba phương thức trên là this sẽ đề cập đến object mà ta truyền vào.

IV. Tổng kết.

Nhìn chung thì cả ba phương thức đều có những nét tương đồng, trong đó call()apply() là gần giống nhau nhất, với bind() thì hơi khác chút nhưng cả ba đều không khó hiểu như ông thần this 🤣.

Hy vọng qua bài viết này sẽ giúp cho các bạn nắm được kiến thức về các phương thức này cũng như phân phiệt được sự giống và khác nhau giữ chúng, những kiến thức này cũng sẽ giúp ích cho các bạn trong quá trình phỏng vấn cũng như làm việc đấy 😉.

Cảm ơn các bạn đã đọc 🤗.

Bài viết liên quan

Lập trình backend expressjs

xây dựng hệ thống microservices
  • Kiến trúc Hexagonal và ứng dụngal font-
  • TypeScript: OOP và nguyên lý SOLIDal font-
  • Event-Driven Architecture, Queue & PubSubal font-
  • Basic scalable System Designal font-

Đăng ký nhận thông báo

Đừng bỏ lỡ những bài viết thú vị từ 200Lab