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

7611

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.

  7 khái niệm Javascript cơ bản không thể bỏ qua

  Callback hell là gì? 6 cách “trị” callback hell trong javascript

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:

Tìm việc làm IT mới nhất trên TopDev

RELATED ARTICLESMORE FROM AUTHOR