Bài 04: Closure là gì? Closure function trong Javascript

Closure là một khái niệm không phải ai cũng biết và thực sự hiểu về nó, đây có thể coi là một cách định nghĩa hàm nâng cao giúp code nhìn trong sáng, cách sử dụng linh hoạt hơn, vì vậy nếu bạn muốn học Javascript nâng cao hoặc học các Javascript Framework khác thì bắt buộc phải hiểu về Closure. Vậy Closure là gì thì chúng ta cùng tìm hiểu nhé.

Closure là một hàm được tạo ra từ bên trong một hàm khác (hàm cha), nó có thể sử dụng các biến toàn cục, biến cục bộ của hàm cha và biến cục bộ của chính nó. Việc viết hàm theo kiểu closure trong một số trường hợp sẽ giúp code nhìn sáng và dễ quản lý hơn, linh hoạt hơn trong việc xử lý các chức năng.

Ví dụ: Xây dựng hàm closure hiển thị thông báo với câu thông báo được nhận từ một tham số, sau đó nối thêm chữ code24h.com đằng sau chuỗi đó.

Cách viết này rất đơn giản và dễ hiểu. Nhưng bây giờ mình muốn viết một dạng khác nhìn rối hơn chút xíu đó là cách sử dụng closure function.

XEM DEMO

Rõ ràng nhìn cách này rất rối, khó hiểu nhất là tại bước 2, vì vậy mình sẽ giải thích bước này nhé. Bạn để ý trong hàm showMessage mình đã return về một function, vì vậy lúc khởi tạo và gán hàm nó vào biến messageFunc thì biến messageFunc sẽ là một #function chưa được khởi động, vì vậy câu thông báo sẽ chưa xuất hiện. Đoạn code ở bước 3 sẽ khởi động hàm trả về đó và câu thông báo sẽ xuất hiện.

Cách viết hàm Closure rất linh động, nó phụ thuộc vào bài toán cụ thể mà đưa ra giải pháp khác nhau. Và sau đây mình sẽ đưa ra những ví dụ về một số cách viết thông thường.

Trong ví dụ ở phần một mình tạo một closure không có tham số, vậy nếu trường hợp có tham số thì cách viết như thế nào? Bạn xem ví dụ dưới đây sẽ hiểu.

XEM DEMO

Trong ví dụ này hàm closure trả về có một tham số time, lúc này tại bước 3 ta phải truyền nó vào thì chương trình mới hoạt động bình thường.

Các closure function có thể sử dụng biến ở 3 phạm vi, thứ nhất là biến toàn cục, thứ hai là biến cục bộ của hàm cha và thứ ba là biến cục bộ của chính nó. Không chỉ sử dụng được mà còn có khả năng thay đổi giá trị của các biến đó.

XEM DEMO

Nếu bạn muốn return nhiều hàm closure thì bạn phải sử dụng một object, trong đó mỗi phần tử sẽ là một closure function.

Như ta biết closure function có thể sử dụng biến tại ba vị trí đó là biến toàn cục, biến cục bộ hàm cha và biến cục bộ của chính nó. Bây giờ có một trường hợp là tên các biến ở ba vị trí đó bị trùng nhau thì sẽ có chuyện gì xảy ra? Trường hợp này nó sẽ ưu tiên từ trong ra ngoài, nghĩa là nó sẽ thực hiện các bước như sau:

Xem ví dụ sau:

Trong ví dụ này biến message trong hàm closure sẽ lấy giá trị của biến cục bộ hàm cha.

Qua bài này mình đã giải thích sơ lược về khái niệm Closure là gì, đồng thời cũng đưa ra một số ví dụ rất căn bản về cách sử dụng hàm Closure trong javascript. Bài này mình chỉ tập trung giải thích về lý thuyết nên các ví dụ đưa ra vẫn chưa thực sự chuyên sâu, hy vọng sẽ giúp ích cho các bạn.