Callback là gì?
Hàm callback là ý tưởng được lấy từ việc sử dụng hàm như một đối số trong lập trình. Trong JavaScript, mọi hàm được coi là một đối tượng hạng nhất được đối xử giống như các đối tượng khác như chuỗi, số và sử dụng làm tham số cho một hàm khác. Đây chính là cơ sở cho khái niệm về Callback function.
Callback function là việc bạn chuyển một đoạn mã (Hàm A) vào một đoạn mã khác (Hàm B). Sau đó, tại thời điểm nào đó, Hàm A sẽ được Hàm B gọi lại (callback). Trong JavaScript, điều này quan trọng bởi ngôn ngữ này hướng sự kiện và bất đồng bộ.
Cách thức hoạt động của Callback
Một hàm hỗ trợ callback function sẽ gọi và thực thi hàm callback trong quá trình xử lý của nó, nhưng đứng vị trí nào trong hàm, chúng ta không biết trước, trừ khi tự viết. Khi truyền tham số cho callback function, chúng phụ thuộc vào hàm cha. Chúng ta có thể truyền callback giống như truyền tham số thông thường, mà không cần “()” sau tên hàm. Điều này giúp callback không được thực thi ngay lập tức, chỉ là một tham số được truyền vào.
Nguyên tắc thực hiện Callback
Tham số vào cần phải là Function
Điều này quan trọng vì nếu bạn không kiểm tra giá trị người dùng truyền vào có phải là một hàm không. Nếu không kiểm tra, bạn sẽ không thể thực thi được và đây là sự khác biệt giữa lập trình viên mới và lập trình viên có kinh nghiệm.
Chú ý “this” khi Callback nằm trong object
Trong đối tượng, hàm xây dựng được tạo bằng cách định nghĩa một khóa và gán giá trị của khóa đó bằng một hàm.
Theo nguyên tắc, hàm callback trong Javascript là hàm đơn phương, nên khi sử dụng từ khóa “this” trong hàm, nó sẽ hiểu là Window Object. Do đó, dù bạn đặt hàm callback trong một đối tượng, bạn không thể truy cập dữ liệu của đối tượng bằng từ khóa “this”.
Khắc phục “this”
Chúng ta có thể sử dụng cú pháp sau để khắc phục “this” khi callback nằm trong object
Callback Hell
Trong trường hợp Callback bên trong Callback khác thì bạn đã gặp phải Callback Hell hay địa ngục Callback và vấn đề này thường xảy ra khi xử lí các lệnh không đồng bộ.
Khi callback hell xuất hiện, logic xử lý của chương trình trở nên rất phức tạp và khó hiểu. Khi có lỗi, việc debug và giải quyết trở nên khó khăn. Ngoài ra, callback hell làm cho code trở nên kém thẩm mỹ, khó đọc và khó bảo trì. Để giải quyết vấn đề này, bạn có thể tìm hiểu thêm về promise và async/await!
Vì sao cần Callback?
Bởi Javascript là ngôn ngữ thực hiện các sự kiện. Thay vì chờ phản hồi, mỗi lần thực thi, Javascript tiếp tục thực hiện các lệnh, đồng thời đợi phản hồi từ các sự kiện khác.
Trong trường hợp function thứ nhất tốn nhiều thời gian và phức tạp hơi khi thực thi thì lúc này chúng ta cần sử dụng callback trong Javascript để đảm bảo quá trình diễn ra theo thứ tự mà mình mong muốn.
Cách tạo Callback
Mở Chrome Developer Console. Nhấn tổ hợp phím:
- Ctrl +Shift+J (Windows)
- Cmd+Option +J (Mac)
Sau đó nhập khai báo hàm vào Console.log:
function doHomework(subject) {
alert(Starting my ${subject} homework.);
}
Tạo một hàm doHomework() có một biến là đối tượng mà chúng ta đang làm việc. Để gọi hàm của bạn, hãy nhập thông tin sau vào console.log:
doHomework(‘math’);
// Alerts: Starting my math homework.
Add thêm Callback như một tham số của function. Callback trong trường hợp này sẽ được định nghĩa là đối số thứ hai trong lệnh gọi function doHomework ()
function doHomework(subject, callback) {
alert(Starting my ${subject} homework.);
callback();
}
doHomework(‘math’, function() {
alert(‘Finished my homework’);
});
Nếu nhập mã vào console.log, bạn sẽ nhận được hai thông báo: “Starting my math Homework” trước và “Finished my homework” sau đó. Tuy nhiên, callback functions không nhất thiết phải được xác định trong lệnh gọi hàm. Chúng có thể được định nghĩa ở một vị trí khác trong mã của chúng ta, như sau:
function doHomework(subject, callback) {
alert(Starting my ${subject} homework.);
callback();
}
function alertFinished(){
alert(‘Finished my homework’);
}
doHomework(‘math’, alertFinished);
Kết quả là hoàn toàn giống nhau, chỉ có một chút khác biệt trong thiết lập. Như vậy, chúng ta đã truyền định nghĩa hàm alertFinished như là một đối số bên trong lệnh gọi hàm doHomework().
Lưu ý: Callback trong Javascript phải là một hàm; nếu bạn truyền một kiểu khác, bạn sẽ nhận được thông báo lỗi “Callback is function” trong console. Từ khóa “this” trong callback thường được hiểu là Window Object, ngay cả khi bạn định nghĩa callback trong một object, không thể truy cập dữ liệu của object bằng từ khóa “this”.
Kết luận
Trên đây là bài viết tìm hiểu Callback là gì? LANIT hy vọng các bạn đã có cái nhìn tổng quan về khái niệm này. Nếu còn bất cứ điều gì thắc mắc thì đừng ngại ngần để lại bình luận nhé!
