Callback Function là gì? Thông tin cho bạn đọc

Callback Function là gì? nếu bạn đã học lập trình, chắc hẳn bạn biết thế nào là function. Qua bài viết dưới đây sẽ cung cấp thêm nhiều nội dung đến độc giả, cùng tham khảo nhé.

Callback Function là gì?

Theo Wikipedia, Callback Function là một đoạn code chạy được được dùng như tham số truyền vào của hàm B nào đó. Hàm A được gọi ngay lập tức hoặc trễ một tí một khi hàm B được gọi. Dễ hiểu hơn, hàm callback là một hàm được gọi khi một điều gì đó xảy ra. Điều gì đấy ở đây là một event, theo phương ngữ lập trình.

Hàm callback là một khái niệm sở hữu từ lập trình hàm và cụ thể hóa cách dùng của các hàm như argument (đối số). Trong JavaScript, mỗi hàm đều là một first-class object (đối tượng hạng nhất). Việc làm này nghĩa là mỗi hàm là một object và có khả năng được sử dụng như những object khác (string, number…). Điều này cho phép chúng ta sử dụng hàm này như tham số cho một hàm khác. Đây chính là ý tưởng cốt lõi phía sau Callback function.

Xem thêm :Khái niệm thiết kế lập trình front-end chi tiết nhất

Vì sao cần sử dụng Callback Function?

Đa phần thời gian, chúng ta tạo chương trình và ứng dụng theo hướng xử lý đồng bộ. Điều này có nghĩa là khi nào bước 1 hoàn thiện, bước 2 mới được thực hiện; khi nào một chương trình xong thì mới thực hiện chương trình khác. Thông thường, khi chúng ta yêu cầu dữ liệu từ một nguồn khác như API (phương thức trung gian) mở, chúng ta không biết khi nào dữ liệu sẽ được trả về.

Trong những hoàn cảnh như vậy, tất nhiên con người muốn chờ dữ liệu xuất hiện. Tuy nhiên chúng ta không mong muốn cả chương trình phải kết thúc khi các dữ liệu đang được tìm kiếm. Đây là lúc hàm callback trở thành hữu dụng. Ngoài ra, nó còn cho phép con người tái dùng code.

Với JavaScript, hàm callback đặc biệt quan trọng. Nguyên nhân là bởi: JavaScript là một ngôn ngữ lập trình hướng sự kiện. Điều này nghĩa là thay vì đợi phản hồi rồi mới tiếp tục, JavaScript sẽ thực thi, đồng thời “lắng nghe” các sự kiện khác.

Nguyên tắc khi hành động Callback Function

Tham số truyền vào phải là một function

Việc làm này cực kì quan trọng bởi nếu như bạn không kiểm duyệt thành quả mà người sử dụng truyền vào là một function thì bạn không thể thực thi được, đây là sự sai biệt giữa một lập trình viên non kinh nghiệm và nhiều trải nghiệm. Xem chẳng hạn như dưới đây để hiểu về cách kiểm tra:

functionshowPopup(callback) if (typeof callback !=='function')alert('Bạn phải truyền vào là một function');returnfalse;
    // do something

Thông qua ví dụ này ta thấy để kiểm tra một biến có phải là function hay không thì ta sử dụng typeof, nếu typeof có giá trị là “function” thì đó là một function.

Cẩn thận với this khi hàm callback nằm trong object

Hàm được xây dựng trong Object là hàm được định nghĩa thông qua key của object và giá trị của key là một hàm. Trong chẳng hạn như này hàm setName được xây dựng bên trong object personInfo

var personInfo = 
    name:'Khoa',setName:function (name) this.name = name;
    

Theo đúng nguyên tắc thì hàm callback là một hàm đơn phương nên khi mà bạn dùng keyword this trong hàm thì nó sẽ hiểu this lúc này chính là đối tượng mục tiêu Window Object, vì thế cho dù cho bạn định nghĩa hàm callback nằm trong một object thì chẳng thể truy xuất đến dữ liệu của object thông qua từ khóa this.

Bạn hãy xem đoạn code sử dụng hàm setName là một callback function dưới đây để hiểu sâu hơn:

// Object chứa hàm callbackvar personInfo = 
    name :'khoa',setName:function(name)// giá trị này sẽ không có tác dụng với key name trong object này// nếu như ta dùng nó là một callback functionthis.name = name;
    
;// Hàm có tham số callbackfunctiontest(callback)callback('Nguyễn Đình Khoa');
// Gọi đến hàm và truyền hàm callback vàotest(personInfo.setName);// Vẫn kết quả cũ Khoa, tức là hàm callback setName đã ko tác động// gì tới thuộc tính namedocument.write(personInfo.name);// Xuống hàngdocument.write('
');// kết quả Nguyễn Đình Khoa, tức đối tượng mục tiêu window đã tự sản sinh ra một key name // và giá trị của nó chính là thành quả ta đã sét trong hàm setName// => this chủ đạo là window objectdocument.write(window.name);

Cải thiện this khi hàm callback nằm trong object

Callback Function là gì?  Ở phần trên mình đã đưa rõ ra chú ý khi sử dụng this trong hàm callback thì this sẽ trỏ tới đối tượng mục tiêu window chứ không phải đối tượng mục tiêu chứa hàm callback, vậy có bí quyết nào khắc phục trạng thái này không? Có đó, con người sẽ sử dụng phương thức apply của hàm callback. Cú pháp như sau:

Xem thêm :Khái niệm về ASP.net công cụ lập trình tốt nhất

// thời gian trướccallback(var1, var2, ...);// Bây giờcallback.apply(callbackObject, [var1, var2, ... ]);

phía dưới là đoạn code khắc phục lỗi ví dụ phía trên:

// Object chứa hàm callbackvar personInfo = 
    name :'khoa',setName:function(name)// giá trị này sẽ không đem lại hiệu quả với key name trong object này// nếu như ta dùng nó là một callback functionthis.name = name;
    
;// Hàm có tham số callbackfunctiontest(callback, callbackObject)var name ="Nguyễn Đình Khoa";callback.apply(callbackObject, [name]);
// Gọi đến hàm và truyền hàm callback vàotest(personInfo.setName, personInfo);// Kết quả: Nguyễn Đình Khoadocument.write(personInfo.name);

Callback Hell

Như ta đã biết, hàm callback được thực thi bên trong 1 hàm khác, nếu ta bắt đầu có hàm callback bên trong một callback khác thì thế nào? Vòng lặp vô tận “callback bên trong callback bên trong callback … ” sẽ có khả năng xảy ra. Thứ quái quỷ này được gọi là callback hell – địa ngục callback, ta sẽ rất hay gặp vấn đề này trong khi xử lí các lệnh bất đồng bộ, kiểu như:

p_client.open(function(err, p_client) 
   p_client.dropDatabase(function(err, done) 
      p_client.createCollection('test_custom_key', function(err, collection) 
         collection.insert('a':1, function(err, docs) // ...// và nhiều callback nữa);
      );
   );
);

Khi callback hell hiện diện, logic xử lí của chương trình sẽ trở thành rất khó khăn và khó kiểm soát, khi có lỗi xảy ra ta cực kì khó để debug cũng giống như xử lý.

Tạo một CallBack

Callback Function là gì? Việc đầu tiên hãy mở Chrome Developer Console trong máy bạn ra. (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J), và nhập khai báo hàm sau vào Console.log của bạn:

function doHomework(subject) 
  alert(`Starting my $subject homework.`);

Ở trên, chúng ta đã tạo function doHomework(). Function của chúng ta có một biến, là đối tượng mà ta làm việc trên đấy. Gọi function của bạn bằng việc nhập thông tin sau vào console.log :

doHomework('math');

// Alerts: Starting my math homework.

Giờ con người hãy add thêm callback vào như là một tham số của function . Callback sau đó được khái niệm là đối số thứ 2 bên trong lệnh gọi function doHomework () .

function doHomework(subject, callback) 
  alert(`Starting my $subject homework.`);callback();

doHomework('math', function() 
  alert('Finished my homework');
);

Như bạn sẽ thấy, nếu như bạn điền code ở trên vào console.log, bạn sẽ nhận lại hai cảnh báo: cái đầu tiên là “Starting my math Homework” , kế tiếp là ‘Finished my homework’ .

Xem thêm Dòng laptop nào là lựa chọn hàng đầu của dân lập trình

Qua bài viết trên của Coder.com.vn đã cung cấp các thông tin về Callback Function là gì? Thông tin cho bạn đọc. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc, cùng tham khảo nhé.

Mỹ Phượng – Tổng hợp & chỉnh sửa

Tham khảo ( niithanoi.edu.vn, viblo.asia, … )