Hiểu về callback trong javascript

Trong bài viết này chúng ta sẽ tìm hiểu về callback funtion trong javascript. Callback không xa lạ gì, nó khá quan trọng trong javascript và gặp ở rất nhiều đoạn code nhưng nó cũng khá là củ xấu, loằng ngoằng

Khái niệm

Callback là một đoạn code được truyền như một tham số của một hàm(function) và chờ để được gọi vào thực thi. Javascript là một ngôn ngữ lập trình hướng sự kiện và bất đồng bộ nên callback function đóng vai trò rất quan trọng, bạn sẽ truyền một callback function vào các sự kiện và xử lý bất đồng bộ đó. Một ví dụ quen thuộc mà hâu như bạn cũng đã tựng sử dụng chỉ có điều chúng ta không biết thôi. Chúng ta bắt một sự kiện on click cho một element nào đó

    $(".el").on("click", function() {
        // do something ====>  đây là callback nè
    });

Như ví dụ trên bạn có thể thấy chúng ta truyền một function như một tham số cho hàm on.

Thậm trí bạn có thể truyền đoạn code đó dưới dạng String luôn. hê hê

    var mul = new Function("x", " y", "return x*y; ");
    console.log( mul(2,2)); // 4

Thời điểm thực thi đoạn code truyền vào phụ thuộc vào hàm đó được định nghĩa như thế nào. Để rõ ràng hơn mình sẽ định nghĩa một hàm sayHello() nhé

function sayHello(name, callback) {
	var myName = name.toUpperCase() + ", Hello";
    return callback(myName);
}
 
var result = sayHello("khanh", function (arg) {
    return arg;
});
 
alert(result);

Bạn có thể thấy được thời điểm mà callback được thực thi là sau khi biến myName thực hiện. và khi chúng ta gọi sayHello trả về sẽ alert với nội dung là"KHANH, Hello".

Một vài lưu ý

• Callback phải là một function Callback là một function nên bạn nhất định phải truyền vào là một function, nếu bạn truyền một type khác thì bạn sẽ nhận được error notice: "Callback is function" trong console.
• Từ khóa this trong callback Như đã nói ở trên thì callback là một hàm bình thường nên khi sử dụng từ khóa this trong hàm thì nó sẽ hiểu this lúc này chính là đối tượng Window, nếu bạn dùng debuger trong hàm callback rồi vào console gõ this, thì sẽ được Window {external: Object, chrome: Object, result: undefined,...... Vì vậy cho dù bạn định nghĩa hàm callback nằm trong một object thì không thể truy cập đến dữ liệu của object thông qua từ khóa this.

Kết luận

Bài viết này mình đã trình bày cơ bản về callback hy vọng sẽ giúp được bạn phần nào nắm được nó vì callback được sử dụng khá nhiều đặc biết nếu bạn để ý trong JQuery sử dụng rất nhiều luôn. Cảm ơn các bạn đã theo dõi.