Closure trong JavaScript: Giải mã qua các ví dụ thực tế

Closure là một khái niệm cơ bản trong JavaScript thường gây nhầm lẫn cho các lập trình viên ở mọi cấp độ. Hiểu rõ về closure là rất quan trọng để viết mã hiệu quả, dễ bảo trì và an toàn. Hướng dẫn toàn diện này sẽ giải mã closure bằng các ví dụ thực tế và minh họa các ứng dụng trong thế giới thực của chúng.

Closure là gì?

Nói một cách đơn giản, closure là sự kết hợp của một hàm và môi trường từ vựng (lexical environment) nơi hàm đó được khai báo. Điều này có nghĩa là một closure cho phép một hàm truy cập các biến từ phạm vi xung quanh nó, ngay cả sau khi hàm bên ngoài đã thực thi xong. Hãy nghĩ về nó như là hàm bên trong "ghi nhớ" môi trường của nó.

Để thực sự hiểu điều này, hãy cùng phân tích các thành phần chính:

• Hàm (Function): Hàm bên trong tạo thành một phần của closure.
• Môi trường từ vựng (Lexical Environment): Phạm vi xung quanh nơi hàm được khai báo. Điều này bao gồm các biến, hàm và các khai báo khác.

Điều kỳ diệu xảy ra bởi vì hàm bên trong vẫn giữ quyền truy cập vào các biến trong phạm vi từ vựng của nó, ngay cả sau khi hàm bên ngoài đã trả về. Hành vi này là một phần cốt lõi trong cách JavaScript xử lý phạm vi và quản lý bộ nhớ.

Tại sao Closure lại quan trọng?

Closure không chỉ là một khái niệm lý thuyết; chúng rất cần thiết cho nhiều mẫu lập trình phổ biến trong JavaScript. Chúng cung cấp các lợi ích sau:

• Đóng gói dữ liệu (Data Encapsulation): Closure cho phép bạn tạo các biến và phương thức riêng tư, bảo vệ dữ liệu khỏi sự truy cập và sửa đổi từ bên ngoài.
• Bảo toàn trạng thái (State Preservation): Closure duy trì trạng thái của các biến giữa các lần gọi hàm, điều này hữu ích để tạo bộ đếm, bộ đếm thời gian và các thành phần có trạng thái khác.
• Hàm bậc cao (Higher-Order Functions): Closure thường được sử dụng cùng với các hàm bậc cao (hàm nhận các hàm khác làm đối số hoặc trả về hàm), cho phép viết mã mạnh mẽ và linh hoạt.
• JavaScript bất đồng bộ (Asynchronous JavaScript): Closure đóng một vai trò quan trọng trong việc quản lý các hoạt động bất đồng bộ, chẳng hạn như callback và promise.

Các ví dụ thực tế về Closure trong JavaScript

Hãy cùng đi sâu vào một số ví dụ thực tế để minh họa cách closure hoạt động và cách chúng có thể được sử dụng trong các kịch bản thực tế.

Ví dụ 1: Bộ đếm đơn giản

Ví dụ này minh họa cách một closure có thể được sử dụng để tạo một bộ đếm duy trì trạng thái của nó giữa các lần gọi hàm.

            
function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const increment = createCounter();

increment(); // Output: 1
increment(); // Output: 2
increment(); // Output: 3

            

              
                Copy
              
            
          

Giải thích:

• createCounter() là một hàm bên ngoài khai báo biến count.
• Nó trả về một hàm bên trong (trong trường hợp này là một hàm ẩn danh) để tăng count và ghi lại giá trị của nó.
• Hàm bên trong tạo thành một closure bao quanh biến count.
• Ngay cả sau khi createCounter() đã thực thi xong, hàm bên trong vẫn giữ quyền truy cập vào biến count.
• Mỗi lần gọi increment() sẽ tăng cùng một biến count, chứng tỏ khả năng của closure trong việc bảo toàn trạng thái.

Ví dụ 2: Đóng gói dữ liệu với biến riêng tư

Closure có thể được sử dụng để tạo các biến riêng tư, bảo vệ dữ liệu khỏi sự truy cập và sửa đổi trực tiếp từ bên ngoài hàm.

            
function createBankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit: function(amount) {
      balance += amount;
      return balance; //Returning for demonstration, could be void
    },
    withdraw: function(amount) {
      if (amount <= balance) {
        balance -= amount;
        return balance; //Returning for demonstration, could be void
      } else {
        return "Insufficient funds.";
      }
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);

console.log(account.deposit(500)); // Output: 1500
console.log(account.withdraw(200)); // Output: 1300
console.log(account.getBalance()); // Output: 1300

// Trying to access balance directly will not work
// console.log(account.balance); // Output: undefined

            

              
                Copy
              
            
          

Giải thích:

• createBankAccount() tạo ra một đối tượng tài khoản ngân hàng với các phương thức để gửi tiền, rút tiền và lấy số dư.
• Biến balance được khai báo trong phạm vi của createBankAccount() và không thể truy cập trực tiếp từ bên ngoài.
• Các phương thức deposit, withdraw, và getBalance tạo thành các closure bao quanh biến balance.
• Các phương thức này có thể truy cập và sửa đổi biến balance, nhưng bản thân biến này vẫn là riêng tư.

Ví dụ 3: Sử dụng Closure với setTimeout trong vòng lặp

Closure rất cần thiết khi làm việc với các hoạt động bất đồng bộ, chẳng hạn như setTimeout, đặc biệt là trong các vòng lặp. Nếu không có closure, bạn có thể gặp phải hành vi không mong muốn do tính chất bất đồng bộ của JavaScript.

            
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log("Value of i: " + j);
    }, j * 1000);
  })(i);
}

// Output:
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

            

              
                Copy
              
            
          

Giải thích:

• Nếu không có closure (biểu thức hàm được gọi ngay lập tức hoặc IIFE), tất cả các callback của setTimeout cuối cùng sẽ tham chiếu đến cùng một biến i, biến này sẽ có giá trị cuối cùng là 6 sau khi vòng lặp hoàn thành.
• IIFE tạo ra một phạm vi mới cho mỗi lần lặp của vòng lặp, bắt giữ giá trị hiện tại của i trong tham số j.
• Mỗi callback của setTimeout tạo thành một closure bao quanh biến j, đảm bảo rằng nó ghi lại đúng giá trị của i cho mỗi lần lặp.

Sử dụng let thay vì var trong vòng lặp cũng sẽ khắc phục được vấn đề này, vì let tạo ra một phạm vi khối cho mỗi lần lặp.

            
for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("Value of i: " + i);
  }, i * 1000);
}

// Output (same as above):
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

            

              
                Copy
              
            
          

Ví dụ 4: Currying và Partial Application

Closure là nền tảng của currying và partial application, các kỹ thuật được sử dụng để biến đổi các hàm có nhiều đối số thành một chuỗi các hàm, mỗi hàm nhận một đối số duy nhất.

            
function multiply(a) {
  return function(b) {
    return function(c) {
      return a * b * c;
    };
  };
}

const multiplyBy5 = multiply(5);
const multiplyBy5And2 = multiplyBy5(2);

console.log(multiplyBy5And2(3)); // Output: 30 (5 * 2 * 3)

            

              
                Copy
              
            
          

Giải thích:

• multiply là một hàm curried nhận ba đối số, mỗi lần một đối số.
• Mỗi hàm bên trong tạo thành một closure bao quanh các biến từ phạm vi bên ngoài của nó (a, b).
• multiplyBy5 là một hàm đã có a được đặt thành 5.
• multiplyBy5And2 là một hàm đã có a được đặt thành 5 và b được đặt thành 2.
• Lần gọi cuối cùng đến multiplyBy5And2(3) hoàn thành phép tính và trả về kết quả.

Ví dụ 5: Mẫu Module (Module Pattern)

Closure được sử dụng rất nhiều trong mẫu module, giúp tổ chức và cấu trúc mã JavaScript, thúc đẩy tính mô-đun và ngăn ngừa xung đột tên.

            
const myModule = (function() {
  let privateVariable = "Hello, world!";

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    },
    publicProperty: "This is a public property."
  };
})();

console.log(myModule.publicProperty); // Output: This is a public property.
myModule.publicMethod(); // Output: Hello, world!

// Trying to access privateVariable or privateMethod directly will not work
// console.log(myModule.privateVariable); // Output: undefined
// myModule.privateMethod(); // Output: TypeError: myModule.privateMethod is not a function

            

              
                Copy
              
            
          

Giải thích:

• IIFE tạo ra một phạm vi mới, đóng gói privateVariable và privateMethod.
• Đối tượng được trả về chỉ để lộ publicMethod và publicProperty.
• publicMethod tạo thành một closure bao quanh privateMethod và privateVariable, cho phép nó truy cập chúng ngay cả sau khi IIFE đã thực thi.
• Mẫu này tạo ra một module hiệu quả với các thành viên riêng tư và công khai.

Closure và Quản lý Bộ nhớ

Mặc dù closure rất mạnh mẽ, điều quan trọng là phải nhận thức được tác động tiềm tàng của chúng đối với việc quản lý bộ nhớ. Vì closure giữ quyền truy cập vào các biến từ phạm vi xung quanh chúng, chúng có thể ngăn các biến đó bị thu gom rác nếu chúng không còn cần thiết. Điều này có thể dẫn đến rò rỉ bộ nhớ nếu không được xử lý cẩn thận.

Để tránh rò rỉ bộ nhớ, hãy đảm bảo rằng bạn phá vỡ mọi tham chiếu không cần thiết đến các biến trong closure khi chúng không còn cần thiết. Điều này có thể được thực hiện bằng cách đặt các biến thành null hoặc bằng cách tái cấu trúc mã của bạn để tránh tạo các closure không cần thiết.

Những lỗi thường gặp về Closure cần tránh

• Quên phạm vi từ vựng: Luôn nhớ rằng một closure nắm bắt môi trường *tại thời điểm nó được tạo ra*. Nếu các biến thay đổi sau khi closure được tạo, closure sẽ phản ánh những thay đổi đó.
• Tạo closure không cần thiết: Tránh tạo closure nếu chúng không cần thiết, vì chúng có thể ảnh hưởng đến hiệu suất và việc sử dụng bộ nhớ.
• Rò rỉ biến: Hãy chú ý đến vòng đời của các biến được closure nắm giữ và đảm bảo rằng chúng được giải phóng khi không còn cần thiết để ngăn chặn rò rỉ bộ nhớ.

Kết luận

Closure trong JavaScript là một khái niệm mạnh mẽ và thiết yếu mà bất kỳ nhà phát triển JavaScript nào cũng cần phải hiểu. Chúng cho phép đóng gói dữ liệu, bảo toàn trạng thái, các hàm bậc cao và lập trình bất đồng bộ. Bằng cách hiểu cách closure hoạt động và cách sử dụng chúng một cách hiệu quả, bạn có thể viết mã hiệu quả, dễ bảo trì và an toàn hơn.

Hướng dẫn này đã cung cấp một cái nhìn tổng quan toàn diện về closure với các ví dụ thực tế. Bằng cách thực hành và thử nghiệm với những ví dụ này, bạn có thể đào sâu sự hiểu biết của mình về closure và trở thành một nhà phát triển JavaScript thành thạo hơn.

Tài liệu tham khảo thêm

• Mozilla Developer Network (MDN): Closures - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• You Don't Know JS: Scope & Closures của Kyle Simpson
• Khám phá các nền tảng lập trình trực tuyến như CodePen và JSFiddle để thử nghiệm với các ví dụ closure khác nhau.