Một closure là một hàm được gói cùng với các tham chiếu đến các biến từ scope (lexical) xung quanh nó. Nhờ closure, một hàm bên trong vẫn giữ quyền truy cập vào các biến của hàm bên ngoài ngay cả sau khi hàm bên ngoài đã trả về.
() {
count = ;
{
: ++count,
: count,
};
}
a = ();
b = ();
a.(); a.();
b.();
count không thể truy cập từ bên ngoài — chỉ inc/get mới thấy nó. Đó là tính riêng tư của dữ liệu được xây từ một closure. Và mỗi lần gọi makeCounter() tạo ra một scope mới, biệt lập.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0); // in 3, 3, 3 — tất cả dùng chung một `i`
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0); // in 0, 1, 2 — `let` riêng cho mỗi vòng lặp
}
Với var, mọi callback closure trên cùng một i (vốn đã là 3 vào lúc chúng chạy). let tạo một binding mới ở mỗi vòng lặp.
Closure là động lực cho tính riêng tư của module, memoization, currying, các event handler/callback nhớ được state, và chính xác là cách các React hook (useState) lưu giữ giá trị giữa các lần render.