, March 23, 2023

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

Home Feed UI Instagram with TailwindCSS: Giới thiệu về series

Vậy bạn còn chờ gì nữa mà không khai phá "mảng đất" đầy tiềm năng này thông qua series HomeFeed UI Instagram with TailwindCSS của 200Lab....

Home Feed UI Instagram with TailwindCSS: Giới thiệu về series
ReactJS Tutorial for Beginners Phần 2

Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial...

ReactJS Tutorial for Beginners Phần 2
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?

Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!...

ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7

Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6

Trong phần này, chúng ta sẽ config React Context firebase cho project của chúng ta, sau đó tạo Sign In Page và apply Authentication màfirebase cung cấp cho project của chúng ta nhé. Bắt đầu thôi 😉!...

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6
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.