Bài 08: Anonymous function trong javascript

Trong Javascript chúng ta có thể khai báo hàm theo cú pháp chuẩn của nó, hoặc sử dụng Closure function, hoặc trong ES6 thì sử dụng Arrow function. Nhưng bạn có biết chúng ta có một cách khai báo hàm nữa rất hay đó là Anonymous functions.

1. Anonymous functions là gì?

Anonymous functions hay còn gọi là hàm ẩn danh, là một hàm được sinh ra đúng vào thời điểm chạy của chương trình. Thông thường khi bạn khai báo một hàm thì trình biên dịch sẽ lưu lại trong bộ nhớ nên bạn có thể gọi ở trên hay dưới vị trí khai báo hàm đều được, nhưng với anonymous functions thì nó sẽ được sinh ra khi trình biên dịch xử lý tới vị trí của nó.

Anonymous functions được khai báo bằng cách sử dụng toán tử thay vì sử dụng cú pháp định nghĩa hàm thông thường. Xét ví dụ cách khai báo hàm thông thường dưới đây:

function showDomain()
{
    alert('Học Javascript tại Freetuts.net');
}
 
// Gọi hàm
showDomain();

Nhưng nếu bạn khai báo bằng cách sử dụng hàm ẩn danh (anonymous function) thì cú pháp sẽ như sau:

var showDomain = function()
{
    alert('Học Javascript tại Freetuts.net');
};
 
// Gọi hàm
showDomain();

Nghĩa là bạn sẽ sử dụng toán tử = để khai báo hàm ẩn danh và gán nó vào đối tượng showDomain.

2. Anonymous functions được khởi tạo tại thời điểm chạy

Như ở trên mình có trình bày, anonymous được khởi tạo tại thời điểm chương trình chạy, điều này khác hoàn toàn với hàm được định nghĩa bài bản.

Xét ví dụ với cách tạo hàm bình thường dưới đây: XEM DEMO

// gọi trước hàm
showDomain(); // hoạt động
 
function showDomain()
{
    alert('Học Javascript tại Freetuts.net');
}
 
// gọi sau hàm
showDomain(); // hoạt động

Trong ví dụ này cho dù bạn gọi hàm ở phía trên hay dưới đều hoạt động tốt là vì chương trình đã lưu hàm đó vào bộ nhớ. Nhưng nếu ta sử dụng anonymous function như ví dụ dưới đây sẽ bị lỗi ngay.

// gọi trước hàm
showDomain(); // Lỗi vì hàm này chưa tồn tại
 
var showDomain = function()
{
    alert('Học Javascript tại Freetuts.net');
};
 
// gọi sau hàm
showDomain(); // hoạt động vì hàm đã tồn tại

3. Anonymous function là hàm không tên

Điều này nghe hơi lạ vì làm thế nào để gọi đến một hàm mà nó lại không có tên? Với các tạo thông thường thì ta phải có tên hàm, còn với anonymous thì bạn có thể sử dụng tên biến để thay thế cho tên hàm, hoặc bạn có thể sử dụng hàm call() để invoke (thực thi).

(function(){
    alert('code24h.com');
}).call(this);

Với hàm không tên bạn phải bao quanh bằng cặp () thì mới sử dụng hàm call được.

Nếu bạn cố tình gán tên hàm vào trong anonymous function thì tên đó sẽ không tồn tại, ví dụ:

var demo = function test()
{
    alert('code24h.com');
};
demo(); // dúng
test(); // sai vì test không tồn tại

4. Anonymous function có hữu ích hay không?

Tùy vào từng trường hợp mà anonymous function rất hữu ích, nếu bạn cần một function ngay tại một thời điểm thì nó rất hữu ích, hoặc bạn muốn thực hiện một callback function thì nó cũng rất hữu ích.

Ví dụ: sử dụng callback function

function caller(func)
{
    func();
}
 
caller(function(){
    alert('Hàm callback');
});

5. Lời kết

Nếu bạn học sâu vào Javascript hoặc tìm hiểu các thư viện, framework nổi tiếng hiện nay như Angular, NodeJS thì sẽ thấy anonymous function được sử dụng rất nhiều, chính vì vậy việc hiểu bản chất của hàm này sẽ giúp bạn rất nhiều.