THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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ó.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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('freetuts.net');
}).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('freetuts.net');
};
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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top