Closure là gì? Tại sao tôi cần dùng closure?
Bài viết được sự cho phép của tác giả Tống Xuân Hoài
Vấn đề
Closure là một kiến thức quan trọng trong lập trình, nhờ có nó mà bạn có thể triển khai những chức năng một cách dễ dàng hơn.
Closure cũng khá phổ biến trong giới lập trình Javascript, có những người chưa từng nghe đến closure nhưng có thể đã vô tình dùng hoặc cũng có những người nghe rồi nhưng lại chưa thực sự hiểu về closure bởi nó khá là trừu tượng. Vậy thì hãy tiếp tục đọc bài viết để khám phá thêm nhé.
Lexical scope
Trước tiên tôi xin giới thiệu một chút về Lexical scope (tức phạm vi biến Lexical): trong một nhóm các hàm lồng nhau, các hàm bên trong có quyền truy cập vào các biến và các tài nguyên khác trong phạm vi hàm cha của chúng. Lexical scope đôi khi còn được gọi là Static scope.
Ví dụ:
function foo() {
const a = 1;
function bar() {
console.log(a);
}
bar(); // 1
}
Mặc dù biến a
không nằm trong hàm bar
nhưng bar
nằm trong foo
do đó bar
cũng có thể truy cập vào biến a
.
Closure
Tương tự, closure cũng theo nguyên tắc Lexical scope, nó có thể truy cập đến các biến của hàm khác ngoài các biến của nó và các biến toàn cục nhưng một điều quan trọng: các hàm closure vẫn có khả năng lưu giữ trạng thái của các biến bên trong nó, hay nói cách khác mỗi khi bạn trả về (return) một hàm hoặc gán một hàm cho một biến thì nó sẽ mang theo giá trị của tất cả các biến mà nó phụ thuộc.
Ví dụ:
function add(x) {
return function addTo(y) {
return x + y;
}
}
const addFive = add(5);
const addToTen = addFive(10);
console.log(addToTen); // 15
Trong ví dụ trên hàm add
nhận một tham số x
sau đó trả về một hàm nhận vào tham số y
rồi trả về tổng của x
, y
.
Đầu tiên khi gọi hàm add(5)
xong thì ta nghĩ các biến x
, y
trong add
sẽ không còn tồn tại nữa. Tuy nhiên sau khi gọi tiếp addFive(10)
thì chúng ta vẫn nhận được kết quả là 15, điều này có nghĩa là trạng thái của hàm add
vẫn được lưu lại ngay cả khi hàm đã được thực thi xong, nếu không lưu lại thì addFive(10)
sẽ không biết giá trị của biến x
ở lần gọi trước là 5.
Từ đó ta hiểu khi add
trả về một hàm addTo
thì addTo
được gói lại trong một ngữ cảnh có cả x
, y
tại thời điểm đó.
Việc làm JavaScript Hồ Chí Minh dành cho bạn!
Lý thuyết closure là vậy, thế thì closure có những tác dụng gì?
Thứ nhất quay lại với một ví dụ kinh điển như sau:
for(var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
}, 0);
}
Chúng ta mong muốn kết quả sẽ là 0 1 2 3 4
nhưng rất tiếc kết quả của nó lại là 5 5 5 5 5
. Bởi vì setTimeout chỉ được thực thi sau khi vòng lặp kết thúc việc lặp, khi đó giá trị tham chiếu của biến i
trong các hàm console.log
đã bằng 5.
Để giải quyết vấn đề này, tôi có thể thay var
bằng let
hoặc sử dụng closure bao bọc setTimeout để tạo ra một ngữ cảnh riêng cho hàm ngay lúc đó:
for(var i = 0; i < 5; i++) {
(function(j) {
setTimeout(() => {
console.log(j);
}, 0);
})(i);
}
Ngoài ra closure còn được ứng dụng trong việc tạo ra phạm vi cho các thuộc tính trong object.
Xem xét ví dụ sau:
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
getName
và setName
được thêm vào để nổ lực ngăn chặn việc truy cập trực tiếp vào name
, thế nhưng vì Class trong Javascript không hỗ trợ Access modifier nên nó vẫn bị dễ dàng chỉnh sửa như thường.
const p = new Person();
p.setName('estacks');
p.getName(); // estacks
p.name = 'edited';
p.name; // edited;
Để ngăn chặn điều trên, hãy thử với một hàm closure:
function Person() {
let _name;
const getName = () => {
return _name;
}
const setName = (name) => {
_name = name;
}
return {
getName,
setName,
}
}
const p = Person();
p.setName('estacks');
p.getName(); // estacks
p._name; // undefined
Hàm Person
trả về hai hàm closure mà chúng có thể truy cập được vào _name
.
Các bạn thấy đấy, không thể truy cập vào biến _name
trực tiếp được. Mọi thao tác với _name
phải thông qua hai hàm set và get kia.
Còn một ứng dụng của closure đó là curry function, nhờ có closure mà việc tạo ra một hàm curry trở nên dễ dàng hơn bao giờ hết, còn tính ứng dụng thì lại còn rất cao nữa.
Tổng kết
Closure không phải là khái niệm chỉ dành riêng cho javascript mà rất nhiều ngôn ngữ cũng hỗ trợ. Closure là một hàm theo nguyên tắc Lexical scope và có khả năng lưu giữ trạng thái của các biến liên quan bên trong nó. Closure có nhiều ứng dụng quan trọng có thể kể đến như tạo Access modifier, curry function… Closure cũng là một kiến thức quan trọng trong phỏng vấn để đánh giá mức độ hiểu biết của bạn về ngôn ngữ Javascript nữa đấy.
Bài viết gốc được đăng tải tại 2coffee.dev
Xem thêm:
- Một vài điều cần lưu ý khi bạn làm việc với JS
- Xử lý bất đồng bộ với Promise.all trong JavaScript
- Top 10 câu hỏi phỏng vấn JavaScript cực chi tiết
Tìm việc làm IT mới nhất trên TopDev
- M Mới ra trường không kinh nghiệm, sao làm BA?
- C Chuyển đổi SA key sang Workload Identity
- U Use Case Diagram và 5 sai lầm thường gặp
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- D Dart là gì? Ứng dụng của ngôn ngữ lập trình Dart
- C Chuẩn Hóa CV, Nhận Ngay Phím Chất
- S So sánh MySQL và MongoDB: Nên chọn CSDL nào?
- D Dân BA có cần phải rành về kỹ thuật???
- C CSS Selector là gì? Cách sử dụng các loại CSS Selector phổ biến
- P Phân biệt Sketch, Wireframe, Mockup, và Prototype?