, October 26, 2021

0 kết quả được tìm thấy

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


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

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:

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

Ví dụ:

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:

function.apply(thisArg, [argsArray]);

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

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.

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

Ví dụ:

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 cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉....

Number, string, array và object trong JavaScript
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" trong JavaScript.
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.