JavaScript Callback Function

1 Function trong javascript

Ta thường nghĩ function là một hàm nhận các giá trị đầu vào (input) thực hiện một số lệnh nào đó rồi trả về kết quả (output). Trong javascript function cũng là một đối tượng (object) nó có thể thực thi như một hàm hoặc một class giống với String, Array, Number, ... Như vậy function cũng tạo ra được các đối tượng với các trạng thái của đối tượng đó. Dưới đây là ví dụ cho 2 cái sử dụng của function

Cách 1 function sử dụng như một hàm thông thường nhận input trả về output

function hello(name) {
  console.log("Hello " + name);
}
Hello("World!"); // => Hello World!
var a = hello;
a("World!"); // Hello World!

Cách 2 function được sử dụng như một class

function Person(name) {
  this.name = name;

  this.sayHello = function() {
    console.log("Hello " + this.name);
  }
}
var person = new Person("person");
person.sayHello();

2 Callback Function

Nói một cách đơn giản "callback function" là một argument dưới dạng function của một function khác không được thực thi ngay lập tức. Nó được gọi đến ở một chỗ nào đó trong phần thân của của một function khác.

Chi tiết hơn thì việc truyền function như một (đối số) argument của một function khác cũng giống như một truyền biến (variable) bởi vì function cũng là một đối tượng (object). Ta gọi argument (có giá trị là function) là callback function. Khi ta truyền một function là một argument của một function khác, điều đó có nghĩa là thứ ta truyền vào là định nghĩa của function đó và không thực thi ngay tại thời điểm truyền vào. Sau khi có được định nghĩa của function thì ta có thể thực thi nó tại bất cứ điểm nào ở trong function khác kia.

Để hiểu rõ hơn về callback function ta sẽ xem vài ví dụ sau

function function1() {
  console.log("function1");
}
function function2() {
  function1();
}
function2(); // => "function1"

Trong ví dụ trên mặc dùng function1 được gọi trong phần thân của function2 nhưng đây không phải là callback function bởi ví nó không phải là argument của function2.

function function1() {
  console.log("function1");
}
function function2() {
  function1();
}
function2(function1()); // => "function1"

Trong ví dụ trên function1 được thực thi ngay tại thời điểm gọi đến function2. Kết quả của function1 là argument của function2. Như vậy đây cũng không phải callback function.

Xét một ví dụ khác

function function1() {
  console.log("function1");
}
function function2(callback) {
  // callback is a callback function
  callback();
}
function2(function1); // => "function1"

Trong ví dụ trên ta thấy function1 được truyền vào là argument của function2. Trong function 2 paramenter (tham số) callback chính là một callback function nó được gọi đến ở phần thân của function2.

Callback function được sử dụng rất phổ biến trong Javascript, dưới đây là một ví dụ với Jquery

$("body").click(function() {
  alert("body Clicked");
});

Ví dụ trên khá đặc biệt bởi vì chúng ta không định nghĩa một function từ trước rồi truyền function này cho phương thức click mà chúng ta định nghĩa một function không tên rồi trong khi gọi phương thức click. Người ta gọi function không tên đó là anonyous function. Anonymous function này được gọi ở trong phần thân của phương thức click. Như vậy mỗi khi ta click vào trang web thì event click được chạy và sẽ thực thi callback function.

Việc phạm vi truy cập của callback function cũng tuân thủ theo scope và closure. Ví dụ

var a = 1;

function function1() {
  console.log(a);
  console.log(b);
}

function function2(callback) {
  var b = 10;
  callback();
}
function2(function1);

Trong ví dụ trên ta thấy function1 được truyền vào function2 dưới dạng callback function. Khi gọi callback function trong function2 thì ta có thể truy cập được biến a một cách bình thường bởi vì biến a là global (theo quy định của scope). Tuy nhiên lại không thể truy cập được biến b trong function2 bởi vì theo quy định của closure function1 không được định nghĩa trong function2 nên cũng không thể truy cập được các biến trong function2.