Closures rất hữu ích vì nó cho phép chúng ta gắn một vài dữ liệu (bên trong lexical environment) với một function sẽ tương tác với dữ liệu.
Tương tự như trong lập trình hướng đối tượng, các đối tượng cho phép chúng ta gắn một vài dữ liệu với một hoặc nhiều phương thức bên trong.
Trong lập trình web, hầu hết code được viết bằng JavaScript là event-based — chúng ta định nghĩa một xử lý, sau đó gắn nó vào event sẽ được gọi bởi user (ví dụ như hành vi click hay nhấn phím).
Đoạn code của chúng ta sẽ là callback: 1 function chạy khi có một sự kiện xảy ra.
> Tìm hiểu thêm về Callback trong JavaScript
Ví dụ:
-
Giả sử chúng ta muốn thêm một cái nút để thay đổi kích thước chữ. Một trong những cách làm là thiết lập
font-size cho thẻ body bằng giá trị px, sau đó thiết lập kích thước của những phần từ khác (như header) sử dụng đơn vị em
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Khi thay đổi font-size của thẻ body, kích thước font của các thẻ h1, h2 sẽ tự động được điều chỉnh (bởi vì đơn vị em dựa theo kích thước của font của phần tử cha).
Bây giờ, chúng ta sẽ thiết lập chức năng thay đổi kích thước font-size cho thẻ body
Trong JavaScript, ta tạo ra:
function chinhFontSize(fontSizeMoi) {
return function() {
document.body.style.fontSize = fontSizeMoi + 'px';
};
}
var size12 = chinhFontSize(12);
var size14 = chinhFontSize(14);
var size16 = chinhFontSize(16);
size12, size14, và size16 bây giờ là những hàm sẽ thay đổi kích thước font chữ của body sang 12px, 14px hay 16px.
Tạo ra các nút / liên kết với có thể click với HTML:
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
Sử dụng JS DOM để gán hàm tương ứng cho id tương ứng:
// Gán hàm thay đổi kích thước font-size
// cho id tương ứng
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;