Closure là gì? Tại sao tôi cần dùng closure?

Closure là gì? Tại sao tôi cần dùng closure?

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

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

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;
  }
}

getNamesetName đượ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, bạn nào chưa đọc hoặc chưa biết về curry function thì có thể xem bài viết này của tôi Curry function là gì? Một món "cà ri" ngon và làm sao để thưởng thức nó?, 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.

Tài liệu tham khảo:

Cao cấp
Hello

5 bài học sâu sắc

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Mỗi sản phẩm đi kèm với những câu chuyện. Thành công của người khác là nguồn cảm hứng cho nhiều người theo sau. 5 bài học rút ra được đã thay đổi con người tôi mãi mãi. Còn bạn? Hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (1)

Nội dung bình luận...
Avatar
Đông Nguyễn Văn2 năm trước

Bài viết hay, em cảm ơn tác giả ạ.Nhưng ở đoạn kết quả của nó lại là 4 4 4 4 4.Em nghĩ là 5 5 5 5 5 đúng không ạ?

Trả lời
Avatar
Xuân Hoài Tống2 năm trước

@gif [Q2aN4iiaibCus] Xin lỗi, đúng là mình có sai sót và đã sửa lại bài viết. Cảm ơn bạn nhé.